Question

我正在使用php创建一个表单。我的一个领域我创建了一个六行的下拉框，其中有两个选项“浮动速率”和“固定费率”可供选择，并且每个下拉框侧面都有一个按钮。我想让用户更容易选择。例如，如果用户在第一行选择“浮动汇率”并单击侧面的按钮，则其余行将其选择更改为“浮动汇率”。如果用户选择第4行中的任一选项，则第5行和第6行将根据用户在第4行选择的选项进行更改。我是Java或Jquery的noobie。有没有办法使用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>

Answer 1

以下是代码：

我模仿了你的情况：

<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;
    }
  }
};

Live jsFiddle Demo

<强> EDIT1

要仅更改行下方的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;
        }
      }
    }
  }
};

Live jsFiddle Demo

<强> EDIT2

要使用INPUT更改type="text"元素的值，您只需将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;
          }
        }
      }
    }
  }
};

Live jsFiddle Demo

Javascript onclick将第二个输入框的值更改为与第一个输入框的值相同

1 个答案: