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

How to change options of a select using JavaScript

提问by avorum

I have an HTML page in which I have 2 selects.

我有一个 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>

What I'd like to happen is that checkValidOption()could make it so that if "Plugin ID" is selected in field that the only option is EQUALS (and it's selected) and otherwise all the other options are available. Any idea on how to approach this?

我想要发生的是，checkValidOption()如果在字段中选择“插件 ID”，则唯一的选项是 EQUALS（并且它已被选中），否则所有其他选项都可用。关于如何解决这个问题的任何想法？

I tried changing the innerHTMLof the operator select in JS:

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

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

However this results in an empty select(this would also include manually setting the many options for going back to having all the ones listed above).

然而，这会导致一个空的select（这也将包括手动设置 many options 以返回到上面列出的所有那些）。

I can't think of another solution, any help would be greatly appreciated.

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

采纳答案by Sergio

Try this:

尝试这个：

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

回答by alfasin

To manipulate options when Plugin IDwas selected:

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

Here's a link to fiddle

这是小提琴的链接

回答by pedrum golriz

A select field doesn't use the innerHTML method, you need to use value.

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

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

回答by robz228

heres a jquery solution.

这是一个 jquery 解决方案。

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

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

http://jsfiddle.net/2TZJh/

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

    ]; 

  });