php - Javascript onclick改变第二个输入框的值与第一个输入框的值相同

Question

我正在使用 php 创建一个表单。我的一个字段创建了一个六行下拉框，其中有两个相同的选项“ float 利率”和“固定利率”可供选择，并且每个下拉框旁边还有一个按钮。我想让用户更容易选择。例如，如果用户在第一行选择“ float 利率”并单击侧面的按钮，则其余行会将其选择更改为“ float 利率”。如果用户选择第 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>

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

<小时/>

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

Live jsFiddle Demo

<小时/>

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

Live jsFiddle Demo