javascript - 如何使用 JavaScript 更改选择的选项

Question

我有一个 HTML 页面，其中有 2select秒。

<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（并且它被选中），否则所有其他选项都可用。关于如何解决这个问题的任何想法？

我尝试更改innerHTMLJS 中的运算符选择：

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

但是，这会导致空select（这还包括手动设置 manyoption以返回到上面列出的所有）。

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

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

Answer 2

要在选择时操作选项Plugin 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;     
        }
    }
}

这是小提琴的链接

Answer 3

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

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

Answer 4

heres a jquery solution.

every time the first select changes, it produces new options from an array for the 2nd select. issue here is i had to change the option values of the first select to 0 and 1 to select which value in the array, you can manipulate those later if you are storing this info somewhere

http://jsfiddle.net/2TZJh/

$(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>'

    ]; 

  });