如何使用JavaScript更改选项的选项

Question

我有一个HTML页面,其中我有2 select秒.

<select id="field" name="field" onchange="checkValidOption();">
    <option />
    <option value="Plugin ID">Plugin ID</option>
    <option value="Name">Name</option>
</select>
<select id="operator" name="operator" onchange="checkValidOption();">
    <option />
    <option value="EQUALS">EQUALS</option>
    <option value="CONTAINS">CONTAINS</option>
    <option value="NOT CONTAINS">NOT CONTAINS</option>
    <option value="REGEX">REGEX</option>
</select>

我想要发生的是,checkValidOption()如果在字段中选择"插件ID",则唯一选项是EQUALS(并且已选中),否则所有其他选项都可用.有关如何处理此问题的任何想法？

我尝试innerHTML在JS中更改运算符select:

document.getElementById("operator").innerHTML =
    "<option value='EQUALS'>EQUALS</option>";

然而,这会导致空select(这也包括手动设置多个options以便返回到上面列出的所有内容).

我想不出另一个解决方案,任何帮助都将不胜感激.

Answer 1

尝试这个：

演示在这里

var field = document.getElementById('field');
var operator = document.getElementById('operator');
field.onchange = function () { fieldcheck(); }
operator.onchange = function () { fieldcheck(); }
fieldcheck();

function fieldcheck() {
    if (field.value == 'Plugin ID') {
        for (i = 0; i < operator.options.length; ++i) {
            if (operator.options[i].value != 'EQUALS') {
                operator.options[i].disabled = true;
            }
        };
        operator.value = 'EQUALS';
    } else {
        for (i = 0; i < operator.options.length; ++i) {
            operator.options[i].disabled = false;
        };
    }
}