Question

如何在<select multiple>元素中的指定索引处插入选项元素？

由于

Answer 1

$("select option").eq(index).before($("<option></option>").val(val).html(text));

Answer 2

Vanilla javascript（没有jQuery）和跨浏览器。

在select＆＃34; mySelect＆＃34;中添加一个新选项，其值为＆＃34; 1＆＃34; ＆＃34; text＆＃34;的文本，在第0个现有项目之前：

mySelect.options.add(new Option("text", "1"), mySelect.options[0]);

请参阅：https://developer.mozilla.org/en/docs/Web/API/HTMLSelectElement#add%28%29

Answer 3

还有另一个选择，没有jquery：

标记：

<select multiple="multiple" id="mySelect">
    <option>First</option>
    <option>Third</option>
</select>

JS：

<script type="text/javascript">
    var myDdl = document.getElementById("mySelect");
    var myOption = document.createElement("OPTION");
    myOption.innerText = "Second";

    myDdl.options.insertBefore(myOption, myDdl.options[myDdl.options.length - 1]);

</script>

Answer 4

这是你可以做到的一种方式：

var myOption = "<option>Dynamic Option</option>";
var index = 2;
$(myOption).insertBefore("select option:nth-child("+index+")");

fiddle example

Answer 5

我提交了这个答案，因为问题中没有指定jquery。

function insertOptionToSelect(select, idx, option) {
    var saved = [];
    var i;
    for (i = 0; i < select.options.length; i++) {
        saved.push(select.options[i]);
    }
    select.options.length = 0;
    for (i = 0; i < idx; i++) {
        select.options[select.options.length] = saved[i];
    }
    select.options[select.options.length] = option;
    while (i < saved.length) {
        select.options[select.options.length] = saved[i++];
    }
}

以下内容将在选定的选择索引处插入一个选项，其ID为“MyPizzaSelect”：

var myselect = document.getElementById('MyPizzaSelect');
insertOptionToSelect(myselect, myselect.selectedIndex, new Option('Pizza Margarita', '12345'));

如何在html中的select（Multiple）指定索引处插入选项？

5 个答案: