如何将选择框的值添加到文本框？

Question

我有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" /> 

Answer 1

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

Answer 2

由于您用jquery标记了问题，因此我不妨提供基于jquery的答案：

$('[id^=mySelect]').change(function(){
  $('#'+this.id.replace('Select','Input')).val($(this).val())
});

这个简短的代码片段可以满足您的所有需求。 我的第一个选择器[id^=mySelect]将选择所有以'mySelect'开头的ID，如果您希望将此代码段的范围扩展到进一步的选择和输入，这将很有用。 如果这不是您想要的，则可以将其替换为更明确的版本#mySelect,#mySelect1 。