javascript - 如何使用 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() 可以做到，如果在字段中选择了“Plugin ID”，那么唯一的选项是 EQUALS(并且它被选中)，否则所有其他选项可用。关于如何处理这个问题有什么想法吗？

我尝试更改 JS 中运算符选择的 innerHTML:

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

然而，这会导致一个空的 select(这还包括手动设置许多 option 以返回到上面列出的所有选项)。

我想不出其他解决方案，我们将不胜感激。

Answer 1

试试这个:

Demo here

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;
        };
    }
}