如何將選擇框的值添加到文本框？

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

來源

2017-09-10 inaz

是否要將新值附加到文本框上的當前值，還是希望將一個文本框映射到select元素？ – Nisarg

@NisargShah我想在選擇框中添加選擇框的值 – inaz

像選項2，選項3一樣？ – Nisarg

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

來源

2017-09-10 05:04:17 ep98

。這是不正確的。我想將「myselect」的值添加到「myInput」和「myselect2」到「myInput2」 – inaz

您是否指第一次運行要添加值的代碼？ – ep98

我只想將「myselect」值顯示爲「myInput」文本框，「myselect2」顯示爲「myInput2」文本框。基於onchange每個selectbox – inaz

既然你用jQuery標記你的問題我也可以提供一個基於jQuery答案：

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

這個簡短的代碼片段應該盡你所能。我的第一個選擇器[id^=mySelect]將選擇全部以'mySelect'開頭的ID，如果您想擴展此片段的範圍以進一步選擇和輸入，可以使用它。如果這不是你想要的，你可以用更明確的版本#mySelect,#mySelect1來代替它。

來源

2017-09-10 05:30:43 cars10m

如何將選擇框的值添加到文本框？

回答

相關問題