Question

当用户点击按钮时，我尝试用输入文本框中输入的值填充选择列表。例如：

HTML：

<form>
                <h2>Add EVENT/MARKET/SELECTION ID </h2>
                <select id="id_type">
                        <option value="sEVENT">Event</option>
                        <option value="sEVMKT">Market</option>
                        <option value="sSELCN">Selection</option>
                 </select>

                <input id="entered_id" type="number"/>

              <button id="add_id" onclick="populateList()">Add</button>
</form>
<form>
                <h2>Entered IDs</h2>
                <select id="list_id" size="10" multiple="true"></select>

</form>

JS：

function populateList() {
        var events_id   = document.getElementById('entered_id').value;  
/*I want this events_id to be entered to the select list "list_id"*/
}

我尝试了$（＆＃34;＃list_id＆＃34;）。append（events_id）但是没有用。任何帮助表示赞赏。感谢

Answer 1

由于其<select>，您需要附加<option>代码，如：

$("#list_id").append("<option value='"+events_id+"'>"+events_id+"</option>");

Answer 2

尝试 FIDDLE

 $("#add_id").click(function () {
      var value = $("#entered_id").val();    
      $("#list_id").append("<option value =" + value + " >" + value + "</option>");
 });

Answer 3

使用JavaScript

var option = document.createElement("option");
option.text = document.getElementById('entered_id').value;  
option.value = document.getElementById('entered_id').value;  
var select = document.getElementById("list_id");
select.appendChild(option);

Answer 4

以jQuery方式执行所有操作，您可以将单击处理程序绑定到按钮而不是内联方法。

$('#add_id').click(function() {
  $('<option/>', { text: this.value }).appendTo('#list_id');
});

使用与用户输入相同的值自动填写选择框

4 个答案: