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

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>

基本上所有的文本框都应该有相同的选项词，例如，如果选择了“蛋糕”，我希望所有的文本框都显示蛋糕这个词，然后如果选择了“布朗尼”，那么所有的文本框都显示布朗尼等等。谢谢

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>