如何在html中选择（多个）的指定索引处插入选项？

Question

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

感谢

Answer 1

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

Answer 2

这里有一种方法可以做到这一点：

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

fiddle example

Answer 3

而另一种选择，SANS的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

我提出这个答案，因为这个问题是没有指定的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')); 

Answer 5

香草的JavaScript（无jQuery的）和跨浏览器。

要插入一个新的选项为选择 “mySelect”，用 “1” 的值和文本的 “文本”，第0现有项目之前：

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

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