JavaScript-將所選項添加到列表中

Question

所以我試圖讓組合框由用戶選擇的選項填充。一旦用戶選擇該項目並單擊添加，我想將所選項目的文本值添加到列表中。

我有第一部分工作，因爲我想，但是，我有一個艱難的時間添加到列表中的值。我真的不知道如何實現它，或者什麼是最好的方法？如果有人能把我送到我需要研究的正確道路上，我應該看看什麼樣的事件聽衆，方法會很棒。我是JavaScript的超級新手，我很難在腦海中圍繞它。

我有什麼至今：

\t function changeOptions(link) { 
 
\t if (link=="") { 
 
\t \t return; } 
 
\t \t 
 
\t \t switch(link) { 
 
\t \t case "Category1": 
 
\t \t \t var inventory=new Array (
 
\t \t \t "Item1", 
 
\t \t \t "Item2", 
 
\t \t \t "Item3"); 
 
\t \t \t break; 
 
\t \t case "Category2": 
 
\t \t \t var inventory=new Array (
 
\t \t \t "Item4", 
 
\t \t \t "Item5", 
 
\t \t \t "Item6"); 
 
\t \t \t break; 
 
\t } 
 

 
\t \t 
 
\t \t i = document.form.items.options.length; 
 
\t \t if (i > 0) { 
 
\t \t document.form.items.options.length -= i; document.form.items.options[i] = null; 
 
\t \t } 
 

 
\t for (i=0; i< inventory.length; i++) { 
 
\t 
 
\t \t document.form.items.options[i] = new Option(); \t 
 
\t \t document.form.items.options[i].text = inventory[i]; 
 
\t \t document.form.items.options[i].value = inventory[i]; 
 
\t } 
 
\t } \t

<form name=form > 
 
\t \t <b>Select a Category</b><br /> 
 
\t \t <a onclick="changeOptions('Category1')">Category1</a> | 
 
\t \t <a onclick="changeOptions('Category2')">Category2</a> 
 
\t \t <br /><br/> 
 
\t \t <b>Inventory</b><br/> 
 
\t \t <select name="items" multiple="multiple" style="height:150px;width:400px;"> 
 
\t \t \t <option value="">Select An Item</option> 
 
\t \t </select> 
 
\t \t <input type="submit" name= "add" value="Add"> 
 
\t </form>

Answer 1

我添加一些代碼來選定值的列表附加您的組合框的下方。我添加了一個表單事件偵聽器來提交。提交時，我們獲得選擇框的值並將其添加到列表中。你可以調整它並添加驗證和東西。我也添加了一些id到html來查詢JS中的元素。

var select = document.getElementById('select'); 
 
var form = document.getElementById('form'); 
 
var list = document.getElementById('list'); 
 

 
var addItem = function(item) { 
 
    return '<li>' + item + '</li>'; 
 
} 
 

 
var handleSubmit = function(e) { 
 
    e.preventDefault(); 
 
    list.innerHTML += addItem(select.value); 
 
} 
 

 
form.addEventListener('submit', handleSubmit); 
 

 
function changeOptions(link) { 
 
    if (link == "") { 
 
    return; 
 
    } 
 

 
    switch (link) { 
 
    case "Category1": 
 
     var inventory = new Array(
 
     "Item1", 
 
     "Item2", 
 
     "Item3"); 
 
     break; 
 
    case "Category2": 
 
     var inventory = new Array(
 
     "Item4", 
 
     "Item5", 
 
     "Item6"); 
 
     break; 
 
    } 
 

 

 
    i = document.form.items.options.length; 
 
    if (i > 0) { 
 
    document.form.items.options.length -= i; 
 
    document.form.items.options[i] = null; 
 
    } 
 

 
    for (i = 0; i < inventory.length; i++) { 
 

 
    document.form.items.options[i] = new Option(); 
 
    document.form.items.options[i].text = inventory[i]; 
 
    document.form.items.options[i].value = inventory[i]; 
 
    } 
 
}

<form id="form" name=form> 
 
    <b>Select a Category</b> 
 
    <br /> 
 
    <a onclick="changeOptions('Category1')">Category1</a> | 
 
    <a onclick="changeOptions('Category2')">Category2</a> 
 
    <br /> 
 
    <br/> 
 
    <b>Inventory</b> 
 
    <br/> 
 
    <select id="select" name="items" multiple="multiple" style="height:150px;width:400px;"> 
 
    <option value="">Select An Item</option> 
 
    </select> 
 
    <input id="btn" type="submit" name="add" value="Add"> 
 
</form> 
 
<ul id="list"> 
 

 
</ul>