如何在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