javascript - 如何将选择框的值添加到文本框?

标签 javascript jquery

我有 2 个选择框,我想将它们的值添加到基于更改选择框的选择框。我写了下面的代码。但它只适用于一个。 我怎样才能做到这一点 ? 这是我的代码:

var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');

selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
                           
function handleChange()
{
    var selectedValue = this.options[this.selectedIndex].value;
    document.getElementById('myInput').value = selectedValue;
    document.getElementById('myInput2').value = selectedValue;

}
<select id="mySelect">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
</select>
<select id="mySelect2">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
</select>


<input type="text" id="myInput" />
<input type="text" id="myInput2" />

最佳答案

var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');

selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
                           
function handleChange(event)
{
    if (event.target.id == "mySelect") {
      document.getElementById('myInput').value = selectBox.value;
    } else {
      document.getElementById('myInput2').value = selectBox2.value;
    }
}
<select id="mySelect">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
</select>
<select id="mySelect2">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
</select>


<input type="text" id="myInput" />
<input type="text" id="myInput2" />

关于javascript - 如何将选择框的值添加到文本框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46137440/

相关文章:

javascript - 如何从文本框中删除焦点?

javascript - Mockjax 在同一个测试文件中两次?

javascript - 通过按钮重新加载 jQuery

javascript - 为什么 Google 在这些 NodeJS 需要的函数中使用反引号或 "template literals"?

javascript - 用值替换分界线

accordion - Jquery 在 IE 8/7 中切换效果

javascript - 如何使用 javascript 启用和禁用图像加载

javascript - 创建类似 jQuery 风格的库

jquery - 使用 Metro JS 进行平铺动画

Javascript/Jquery 不会更改 Safari 中的 URL 参数,但会在 Chrome 中更改