javascript - 使用表单中的 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

我相信你想要这样的东西

演示小提琴

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);
}