如何将Selectbox的值添加到文本框中



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

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

,由于您用jQuery标记了问题,因此我不妨提供基于jQuery的答案:

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

这个简短的片段应该完成您想要的一切。我的第一个选择器[id^=mySelect]将选择以" mySelect"开头的所有 ALL IDS,如果要扩展本摘要的范围以进一步选择和输入,这将很有用。如果这不是您想要的,则可以用更明确的版本#mySelect,#mySelect1替换它。

最新更新