如何使用JavaScript更改選擇的選項

Question

我有一個HTML頁面，其中有2 select s。

<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」是唯一的選擇是等於（和它的選中），否則所有其他選項可用。任何想法如何解決這個問題？

我試圖改變運營商選擇在JS的innerHTML：

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

然而，這導致空select（這還包括手動設置許多option S表示要回其列出的所有的人以上）。

我不能想到另一種解決方案，任何幫助將不勝感激。

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

選擇字段不使用innerHTML方法，您需要使用值。

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

Answer 3

要操作選項時選擇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 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>' 

    ]; 

    });