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

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

第1行:</ p>

 &lt; td&gt; 
&lt; select class =“dropDown”style =“width:150px”name =“rate_value_1”&gt;
&lt; option value =“&lt;?php echo $ _SESSION ['rate_value_1'];?&gt;”&gt;&lt;?php echo $ _SESSION ['rate_value_1'];?&gt;&lt; / option&gt;
&lt; option value =“浮动汇率”&gt;浮动汇率&lt; / option&gt;
&lt; option value =“固定汇率”&gt;固定汇率&lt; ; / option&gt;
&lt; / select&gt;
&lt; / td&gt;
&lt; td&gt;&lt; input type =“button”value =“equal”class =“equal”/&gt;&lt; / td&gt;
</ code> </ pre>

第二行:</ p>

 &lt; td&gt; 
&lt; select class =“dropDown”style =“width :150px“name =”rate_value_2“&gt;
&lt; option value =”&lt;?php echo $ _SESSION ['rate_value_2'];?&gt;“&gt;&lt;?php echo $ _SESSION ['rate_value_2']; ?&gt;&lt; / option&gt;
&lt; option value =“浮动汇率”&gt;浮动汇率&lt; / option&gt;
&lt; option value =“固定汇率”&gt;固定汇率&lt; / option&gt;
&lt; /选择&GT;
&升 t; / td&gt;
&lt; td&gt;&lt; input type =“button”value =“equal”class =“equal”/&gt;&lt; / td&gt;
</ code> </ pre>
</ DIV>

展开原文

原文

I am creating a form using php. One of my field I created a six rows of drop down box with the same two option 'Floating Rate' and 'Fixed Rate' to select and also a button at the side of each drop down box. I want to make it easier for the user to select. For example if the user select 'Floating Rate' on the first row and click on the button at the side, the rest of the rows will change its selection to 'Floating Rate'. And if the user select either options on the 4th row, the 5th and the 6th row will change according to the option the user choose on the 4th row. I'm a noobie to Java or Jquery. Is there a way to achieve the above result using Javascript?

1st Row:

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

2nd Row:

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

douxian0279
douxian0279 可能重复的Javascript更改输入值onclick到单击按钮的同一行上的值
大约 8 年之前 回复
dpwjx32578146
dpwjx32578146 表id=“interest_rate”
大约 8 年之前 回复
dongzhentiao2326
dongzhentiao2326 桌子有id吗?
大约 8 年之前 回复

1个回答

Here is the code:

I simulated your situation like this:

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

And here is the javascript code that are going to work in that situation, you just need to put this code after the table.

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

To change only the SELECT elements below the row, you need to identify the index of the current SELECT element and then change all below. Here is the code:

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

To change the value of INPUT elements with type="text", you just need to change selectedIndex to value and then check the type of INPUT element like this:

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

dongyang9813
dongyang9813 查看编辑过的帖子。
大约 8 年之前 回复
douba4824
douba4824 输入类型'text'是否可以获得相同的结果? 如果是,我该如何编辑脚本?
大约 8 年之前 回复
dongpigui8898
dongpigui8898 谢谢! 它工作得很好。
大约 8 年之前 回复
dsvtnz6350
dsvtnz6350 我刚刚编辑了这篇文章。
大约 8 年之前 回复
dongsu1951
dongsu1951 有效。 如何使其只有行下方的选择选项才会更改其值并且顶部的值保持不变?
大约 8 年之前 回复
douxie7738
douxie7738 我刚刚添加了一个demo,你可以检查一下。
大约 8 年之前 回复
douyan2002
douyan2002 如果你能告诉我HTML的代码,我可以根据你的代码进行调整。
大约 8 年之前 回复
dongqianzhan8325
dongqianzhan8325 感谢您的快速回复。 但是当我选择并单击按钮时,该值不会改变。
大约 8 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐