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

我尝试在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;
        };
    }
}

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

这是 link to fiddle

Answer 3

select字段不使用innerHTML方法，需要使用value。

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

Answer 4

这是一个jquery解决方案。

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

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

    ]; 

  });

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

4 个答案: