如何使用JavaScript更改select的选项

我有一个HTML页面，其中我有两个选择

但是，这会导致空选择，这还包括手动设置许多选项，以返回到上面列出的所有选项

---

我想不出另一种解决方案，任何帮助都将不胜感激。

选择字段不使用innerHTML方法，您需要使用value

document.getElementById("operator").value = "...";

---

要在选择插件ID时操作选项，请执行以下操作：

function checkValidOption(){
    var x=document.getElementById("field");
    var y=document.getElementById("operator");
    if (x.options[1].selected === true){
        document.getElementById("operator").options[1].selected = true;
        for(var i=0; i<y.length; i++){
            if (i !== 1){
                //disabling the other options 
                document.getElementById("operator").options[i].disabled = true;     
            }
        }
    }       
    else{
        for(var i=0; i<y.length; i++){
            //enabling the other options 
            document.getElementById("operator").options[i].disabled = false;     
        }
    }
}

这里有一个

试试这个：

---

这里有一个jquery解决方案

每次第一次选择更改时，它都会从第二次选择的数组中生成新选项。这里的问题是，我必须将第一个select的选项值更改为0和1，以选择数组中的哪个值，如果您将此信息存储在某个位置，您可以稍后操作这些值

---

不管谁投了反对票，想解释一下原因吗？它完全符合OP的要求。我不想要JQuery，我想要香草Javascript。你的代码最接近我所需要的，能够动态更改可用选项，但是你的for循环抛出语法错误SyntaxError:missing；在for循环初始值设定项指向i.@avorum的初始分配之后，抱歉-有一个错误：现在它已修复-请参阅更新的代码现在我获得文档。getElementById…选项[i]为undefined@avorum查看我根据你的代码发布的链接-运行良好，也许您使用了我的答案的早期版本？阅读您的评论并更新我的代码和演示

document.getElementById("operator").value = "...";

function checkValidOption(){
    var x=document.getElementById("field");
    var y=document.getElementById("operator");
    if (x.options[1].selected === true){
        document.getElementById("operator").options[1].selected = true;
        for(var i=0; i<y.length; i++){
            if (i !== 1){
                //disabling the other options 
                document.getElementById("operator").options[i].disabled = true;     
            }
        }
    }       
    else{
        for(var i=0; i<y.length; i++){
            //enabling the other options 
            document.getElementById("operator").options[i].disabled = false;     
        }
    }
}

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

$(document).ready(function() {

    $("#field").change(function() {
        var val = $(this).val();
        $("#operator").html(options[val]);
    });
      var options = [

        '<option value="EQUALS">EQUALS</option>',
        '<option></option><option value="EQUALS">EQUALS</option><option value="CONTAINS">CONTAINS</option> <option value="NOT CONTAINS">NOT CONTAINS</option>        <option value="REGEX">REGEX</option>'

    ]; 

  });