我正在使用php创建一个表单。我的一个字段我创建了一个六行下拉框,其中包含相同的两个选项"浮动利率"和"固定利率"可供选择,并且每个下拉框的侧面还有一个按钮。我想让用户更容易选择。例如,如果用户在第一行选择"浮动汇率"并单击侧面的按钮,则其余行会将其选择更改为"浮动汇率"。如果用户在第 4 行选择任一选项,则第 5 行和第 6 行将根据用户在第 4 行选择的选项进行更改。我是Java或Jquery的菜鸟。有没有办法使用Javascript实现上述结果?
第一行:
<td>
<select class="dropDown" style="width:150px" name="rate_value_1">
<option value="<?php echo $_SESSION['rate_value_1'] ;?>"><?php echo $_SESSION['rate_value_1'] ;?></option>
<option value="Floating Rate">Floating Rate</option>
<option value="Fixed Rate">Fixed Rate</option>
</select>
</td>
<td><input type="button" value="equal" class="equal" /></td>
第二行:
<td>
<select class="dropDown" style="width:150px" name="rate_value_2">
<option value="<?php echo $_SESSION['rate_value_2'] ;?>"><?php echo $_SESSION['rate_value_2'] ;?></option>
<option value="Floating Rate">Floating Rate</option>
<option value="Fixed Rate">Fixed Rate</option>
</select>
</td>
<td><input type="button" value="equal" class="equal" /></td>
这是代码:
我这样模拟你的情况:
<table id="interest_rate">
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_1">
<option value="rate_value_1">rate_value_1</option>
<option value="Floating Rate">Floating Rate</option>
<option value="Fixed Rate">Fixed Rate</option>
</select>
</td>
<td><input type="button" value="equal" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_2">
<option value="rate_value_2">rate_value_2</option>
<option value="Floating Rate">Floating Rate</option>
<option value="Fixed Rate">Fixed Rate</option>
</select>
</td>
<td><input type="button" value="equal" class="equal" /></td>
</tr>
</table>
这是在这种情况下工作的javascript代码,你只需要把这段代码放在表后面。
document.getElementById('interest_rate').onclick = function (e) {
if (!e) {
e = event;
}
// Get the clicked target
var target = e.target || e.srcElement;
// If this is the target that we want to get.
if ('equal' == target.className && 'button' == target.type) {
// Get the selected index of the 'SELECT' element.
var defaultValue = target.parentNode.parentNode.getElementsByTagName('SELECT')[0].selectedIndex;
// Loop and change all 'SELECT' element to the same selected index.
for (var i = 0, selects = this.getElementsByTagName('SELECT'), selectsLength = selects.length; i < selectsLength; ++i) {
selects[i].selectedIndex = defaultValue;
}
}
};
现场jsFiddle演示
编辑1
要仅更改行下方的SELECT
元素,您需要标识当前SELECT
元素的索引,然后更改下面的所有元素。这是代码:
document.getElementById('interest_rate').onclick = function (e) {
if (!e) {
e = event;
}
var target = e.target || e.srcElement;
if ('equal' == target.className && 'button' == target.type) {
var targetSelect = target.parentNode.parentNode.getElementsByTagName('SELECT')[0];
if (targetSelect) {
var defaultValue = targetSelect.selectedIndex;
for (var i = 0, selects = this.getElementsByTagName('SELECT'), selectsLength = selects.length, status = 0; i < selectsLength; ++i) {
if (status || selects[i] === targetSelect) {
status = 1;
selects[i].selectedIndex = defaultValue;
}
}
}
}
};
现场jsFiddle演示
编辑2
要使用 type="text"
更改INPUT
元素的值,您只需将selectedIndex
更改为 value
,然后像这样检查INPUT
元素的类型:
document.getElementById('interest_rate').onclick = function (e) {
if (!e) {
e = event;
}
var target = e.target || e.srcElement;
if ('equal' == target.className && 'button' == target.type) {
var targetInput = target.parentNode.parentNode.getElementsByTagName('INPUT')[0];
if (targetInput && 'text' == targetInput.type) {
var defaultValue = targetInput.value;
for (var i = 0, inputs = this.getElementsByTagName('INPUT'), inputsLength = inputs.length, status = 0; i < inputsLength; ++i) {
if (status || inputs[i] === targetInput) {
status = 1;
if ('text' == inputs[i].type) {
inputs[i].value = defaultValue;
}
}
}
}
}
};
现场jsFiddle演示