如何在輸入標記中顯示單個選擇選項中的每個選定值

Question

我是javascript的新手，我想使用select選項列出輸入標記中的每個選定值。

我曾嘗試使用javascript來顯示所選值，但是當我第二次選擇第一個值時，將顯示第二個選中的值。 我應該分別在輸入標簽中顯示每個選定的值，而不會忽略其他先前選擇的值。

 function getSelectedValue() { var selectedValue = document.getElementById("list").value; document.getElementById("myValues").innerHTML = selectedValue; } 

 <select name="" onchange="getSelectedValue();" class="form-control" id="list"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> <option value="Option4">Option4</option> </select> <input type="text" name="value[]" id="myValue" value=""> 

我期待輸出
<input type="text" name="value[]" id="myValue" value="Option1">
<input type="text" name="value[]" id="myValue" value="Option3">

因此在輸入中應該顯示

選項1選項3

Answer 1

你可以使用Select2 jQuery插件。

 $(document).ready(function() { $('.js-example-basic-multiple').select2({ width: '100%' }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script> <select class="js-example-basic-multiple" name="options[]" multiple="multiple"> <option>Option1</option> <option>Option2</option> <option>Option3</option> <option>Option4</option> </select> 

Answer 2

您可以使用所選值向div添加新輸入

 var selectedValues = []; function getSelectedValue() { var selectedValue = document.getElementById("list").value; if( !selectedValues.includes(selectedValue) ){ selectedValues.push(selectedValue); document.getElementById("myValues").innerHTML += '<input type="text" name="value[]" id="myValue" value="' + selectedValue + '"></br>'; } } 

 <select name="" onchange="getSelectedValue();" class="form-control" id="list"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> <option value="Option4">Option4</option> </select> <div id="myValues"> </div> 

Answer 3

如果你想使用Jquery，你可以做類似的事情。

 function getSelectedValue() { var selectedValue = document.getElementById("list").value; if(selectedValue) { var html ='<input type="text" name="value[]" id="myValue" value="'+selectedValue+'"> <br>'; $('.inp').append(html); $('.default').remove(); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" onchange="getSelectedValue();" class="form-control" id="list"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> <option value="Option4">Option4</option> </select> <div class="inp"> <input type="text" name="value[]" id="myValue" value="" class="default"> </div> 

Answer 4

我不知道你真正期待什么，但我認為這個解決方案對你有所幫助。 結帳片段。

首先獲取值，然后附加到現有值

 function getSelectedValue() { var selectedValue = document.getElementById("list").value; var _optionSelected = document.getElementById("myValue").value; _optionSelected.length ? document.getElementById("myValue").value += ', '+selectedValue : document.getElementById("myValue").value += selectedValue; } 

 <select name="" onchange="getSelectedValue();" class="form-control" id="list"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> <option value="Option4">Option4</option> </select> <input type="text" name="value[]" id="myValue" value=""> 

Answer 5

我不完全確定我100％理解你，但如果我認為你想要能夠在輸入框中看到所有選定的值？ 你選擇了，永遠！ 如果是這樣的話：

 var values = [] function getSelectedValue() { var selectedValue = document.getElementById("list").value; if (values.indexOf(selectedValue) === -1) { //prevents duplicate values values.push(selectedValue) } document.getElementById("myValues").setAttribute('value', values.join(' ')) } 

 <select name="" onchange="getSelectedValue();" class="form-control" id="list"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> <option value="Option3">Option3</option> <option value="Option4">Option4</option> </select> <input type="text" name="value[]" id="myValues" value="">