Javascript "selectElement.add(option, index)" 在 Firefox 但 Chrome 中工作答案

【问题标题】：Javascript "selectElement.add(option, index)" working in Firefox but ChromeJavascript "selectElement.add(option, index)" 在 Firefox 但 Chrome 中工作
【发布时间】：2014-04-22 22:56:29
【问题描述】：

这是相关的 HTML：

<html>
<body>
...
    <select id="class" name="class">
        <option value=0>Select a Class</option>
        <option>IGME-101-##</option>
        <option>IGME-102-##</option>
        <option>IGME-105-##</option>
        <option>IGME-106-##</option>
        <option>IGME-119-##</option>
        <option>IGME-202-##</option>
        <option>IGME-209-##</option>
        <option>IGME-219-##</option>
        <option>IGME-220-##</option>
        <option>IGME-230-##</option>
        <option>IGME-309-##</option>
        <option>IGME-320-##</option>
        <option>IGME-330-##</option>
        <option>IGME-450-##</option>
        <option>IGME-470-##</option>
        <option>IGME-499-##</option>
        <option>IGME-529-##</option>
        <option>IGME-540-##</option>
        <option>IGME-550-##</option>
        <option>IGME-560-##</option>
        <option>IGME-571-##</option>
        <option>IGME-580-##</option>
        <option>IGME-581-##</option>
        <option>IGME-582-##</option>
        <option>IGME-588-##</option>
        <option>IGME-590-##</option>
        <option>IGME-599-##</option>
        <option>IGME-609-##</option>
        <option>IGME-671-##</option>
        <option>IGME-680-##</option>
        <option>IGME-740-##</option>
        <option>IGME-760-##</option>
        <option>IGME-789-##</option>
        <option>IGME-795-##</option>
        <option>IGME-796-##</option>
        <option>IGME-797-##</option>
        <option>IGME-799-##</option>
        <option>IGME-900-##</option>
        <option>IGME-901-##</option>   
    </select>
...
    <input id="ukClass" name="ukClass" type="checkbox" onclick="setClassUnknown()"/>
</body>
</html>

以及相关的Javascript：

function setClassUnknown() {
        var select = document.getElementById("class");
        if(document.getElementById("ukClass").checked) {
            var opt = document.createElement("option");
            opt.text = "0000-000-00";
            opt.value = "0000-000-00";
            select.add(opt,1);
            select.selectedIndex = 1;
            select.disabled = true;
        }
        else {
            if(select.options[1].value == "0000-000-00") {
                select.remove(1);
            }
            select.selectedIndex = 0;
            if(select.disabled) {
                select.disabled = false;
            }
        }
    }

我已经调试了一段时间。它在 Firefox 中运行良好。

我要做的是在选中复选框时动态地将选项标签添加到此选择菜单（在列表中的特定位置：1），并在未选中复选框时删除该选项。使用 console.log 我可以看到 Chrome 根据需要创建了新的选项标签，但它无法将其添加到选择菜单中。

知道为什么这可以在 Firefox 中运行，但在 Chrome 中不行吗？

【问题讨论】：

<option value="0">Select a Class</option> 值应该被引用
它在 chrome 中非常适合我 -> jsfiddle.net/9aJNd
@adeneo 我更新了你的 JSFiddle；在 Chrome 中对我不起作用。 jsfiddle.net/9aJNd/3
所以修复它-> jsfiddle.net/9aJNd/4
@adeneo 谢谢，这已经解决了！

标签： javascript html google-chrome select add

【解决方案1】：

firefox 似乎承认两种选择：

常规

void add(
  in nsIDOMHTMLElement element,
  in nsIDOMHTMLElement before //Optional from Gecko 7.0
);

这个是 HTML5 的

void add(
  in HTMLElement element,
  in long before //Optional from Gecko 7.0
);

但正如其中一位 cmets 所指出的那样，Chrome 只实现了第一个。如果您将数字作为第二个参数传递，Chrome 会忽略它并将新元素附加到列表末尾，因此您的代码无法在第一个位置找到它。

您可以修复它，使 FF 添加到最后一个位置（但您必须检查您必须选择多少个选项）或更改第二个参数，传递当前的第一个参数。

【讨论】：