Question

我希望我的表单输入值根据从下拉框中选择的内容自动更改。所以我基本上有一个包含三个字段的表单，以及一个<select>标记，它有两个<option>标记，所有这些都在同一页面上，所以我希望表单中的那些字段的值能够动态更新因为在选择框中选择了不同的选项。

<select>
  <option>Cake</option>
  <option>Brownie</option>
</select>

<form>
  <input type="text" name="one"></input>
  <input type="text" name="two"></input>
  <input type="text" name="three"></input>
</form>

基本上所有文本框都有与所选选项相同的单词，例如，如果选择'Cake'，我希望所有textBox都显示单词Cake，然后如果选择'Brownie'，那么所有textBox都显示Brownie等等。感谢

Answer 1

您提供的html的简单javascript解决方案：

var select = document.getElementsByTagName('select')[0];
select.addEventListener('change', function () {
    var texts = document.getElementsByTagName('input');
    for (var i = 0; i < texts.length; i++)
     texts[i].value = select.value;
});

<select>
    <option>Cake</option>
    <option>Brownie</option>
</select>
<form>
    <input type="text" name="one"/>
    <input type="text" name="two"/>
    <input type="text" name="three"/>
</form>

Answer 2

Jquery解决方案 - 更改：

<script>
 $(document).ready(function(){
   $("select#YourSelectId").change(function(){
      var b = $("select#YourSelectId :selected").text();
      $("input.TheInputsYouWantToChange").val(b);
   });
});
</script>

根据从“下拉”框中选择的内容更改输入字段的值

2 个答案: