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

Javascript onclick change the value of the second input box to be the same as the value of the first input box

本文关键字：输入 第一个 onclick Javascript 第二个      更新时间：2023-09-26

我正在使用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演示

相关文章：