如何使用 JavaScript 更改选择的选项答案

【问题标题】：How to change options of a select using JavaScript如何使用 JavaScript 更改选择的选项
【发布时间】：2013-08-01 08:47:18
【问题描述】：

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

<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 为空（这还包括手动设置许多options 以返回到上面列出的所有@s）。

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

【问题讨论】：

阅读 cmets 并更新我的代码和演示

标签： javascript html select

【解决方案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;
        };
    }
}

【讨论】：

【解决方案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

【讨论】：

您的代码最接近我所需要的（能够动态更改可用选项的能力），但您的 for 循环抛出语法错误（SyntaxError: missing ; after for-loop initializer）指向i 的初始分配。
@avorum 抱歉 - 有一个错误 :) 现在它已修复 - 查看更新的代码
现在我得到“document.getElementById(...).options[i] is undefined
@avorum 查看我发布的链接（针对您的代码） - 它运行良好，也许您使用的是我的答案的早期版本？

【解决方案3】：

这里有一个 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>'

    ]; 

  });

【讨论】：

谁投了反对票，想解释一下原因吗？它完全符合 OP 的要求。其他的都没有……
我不想要 JQuery，我想要 Vanilla Javascript。

【解决方案4】：

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

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

【讨论】：