Question

我想在我的option中添加一个select元素，该元素具有#quantite输入提供的值。我希望当我们单击按钮时GetValues()函数添加元素。我试过这个：

<input class="text" id="quantite" type="text" name="quantité" />
<select id="multiSelect" size="5" multiple="multiple">
    <option value="o1">Option 1</option>
    <option value="o2">Option 2</option>
    <option value="o3">Option 3</option>
    <option value="o4">Option 4</option>
    <option value="o5">Option 5</option>
    <option value="o6">Option 6</option>
</select>
<br />
<button id="btnGetValues" onclick="GetValues()">Get Values</button>

function GetValues() {
    // Get select object
    var myList = document.getElementById("multiSelect");

    //Create array to store selected values
    var Selectedelement = $("#quantite").val() ;

    myList.add(Selectedelement);
}
}

我在mylist.add(Selectedelement);

中的javascript中收到错误消息

Answer 1

您可以创建新的option元素并使用appendChild()将其添加到select。试试这个：

function GetValues() {
    var myList = document.getElementById("multiSelect");
    var option = document.createElement('option');
    option.value = document.getElementById('quantite').value;
    option.innerText = 'New Option';
    myList.appendChild(option);
}

Example fiddle

或者纯粹的jQuery解决方案：

<button id="btnGetValues">Get Values</button>

$('#btnGetValues').click(function() {
    $('#multiSelect').append('<option value="' + $('#quantite').val() + '">New option</option>');
});

Example fiddle

Answer 2

document.getElementById返回DOM元素。您应该使用jQuery对象。您还应该使用append代替add来添加新元素。试试以下。

function GetValues() {
     var myList = $("#multiSelect");
     var Selectedelement = $("#quantite").val();

     myList.append('<option value='+Selectedelement+'>'+ Selectedelement +'</option>');                
}

Answer 3

你需要附加一个选项：

$("#multiSelect").append('<option value="anyValue"> '+$("#quantiCommande").val()+' </option>');

Answer 4

我更喜欢简单的javascript。

查看this example，我创建节点元素throw createElement API并设置OptionElement属性。

如何在此选择列表中添加选项元素？

4 个答案: