從表格中用javascript添加到多個選擇列表

Question

我想要有2個空白輸入表單 - 類別和值，當按鈕被按下時，它們被附加/添加到2個多選表單，類別和值。按下按鈕時不會輸入數據。

function doAdd() { 
     // Pick up data from the category and value input fields; 
     // In my form these are named 'cat' and 'val' 
     var catstr = document.getElementById("cat").value; 
     var valstr = document.getElementById("val").value; 

     // pick up references to the text areas; 
     var cats = document.getElementById("catlist"); 
     var nums = document.getElementById("numlist"); 
     // Append text, inserting a new line character between 
     // data sets. 
     if (numadded > 0) { 
      cats.value = cats.value + "\n"; 
      nums.value = nums.value + "\n"; 
     } 

     numadded++; 
     cats.value = cats.value + catstr; 
     nums.value = nums.value + valstr; 
} 

HTML重要線路

<script type="text/javascript" src="./checksubmit.js" ></script> 
    <input type="text" id="val" name="val" size="10"/> 
    <input type="text" id="cat" name="cat" size="30"/> 
    <input type="button" onclick="doAdd();" value="Add item"> 
    <select multiple="multiple" id="catlist" style="width: 250px;"/> 
    <select multiple="multiple" id="numlist" style="width: 250px;"/> 

Answer 1

我相信你想是這樣的

Demo fiddle

function doAdd() { 
    // Pick up data from the category and value input fields; 
    // In my form these are named 'cat' and 'val' 
    var catstr = document.getElementById("cat").value; 
    var valstr = document.getElementById("val").value; 

    // pick up references to the text areas; 
    var cats = document.getElementById("catlist"); 
    var nums = document.getElementById("numlist"); 

    //Create and append new options 
    var catOption = new Option(catstr, valstr); 
    var numOption = new Option(valstr, valstr); 
    cats.appendChild(catOption); 
    nums.appendChild(numOption); 
}