如何在html中选择(多个)的指定索引插入选项

How to insert option at specified index of select(Multiple) in html?

本文关键字：索引 选项 插入 多个 html 选择      更新时间：2023-09-26

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

谢谢

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

香草javascript(无jQuery)和跨浏览器。

将一个新选项插入到select "mySelect"中，值为"1"，文本为"text"，在第0个现有条目之前:

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

见:https://developer.mozilla.org/en/docs/Web/API/HTMLSelectElement添加% 28% 29日

还有一个选项，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>

我提交这个答案，因为问题中没有指定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++];
    }
}

下面将在select id 'MyPizzaSelect'的选定索引处插入一个选项:

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

你可以这样做:

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

小提琴示例

应该可以。将ELEMENT_NAME替换为您的Single/Multi Select的id， INDEX_VALUE替换为指定的索引，并将VALUE替换为您的字符串数据。

语法: 

document.getElementById("ELEMENT_NAME").options[INDEX_VALUE].innerHTML = "VALUE";

例子:

document.getElementById("MyOption").options[0].innerHTML = "HTMLisNotAProgrammingL";
相关文章：