Jak zmienić opcje zaznaczenia przy użyciu JavaScript

Question

Mam stronę HTML, w której mam 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> 

Co chciałbym się zdarzyć, że checkValidOption() mógłby zrobić to tak, że jeśli „Plugin ID” jest zaznaczona w polu, że jedynym rozwiązaniem jest równa się (i jest zaznaczona), a poza tym dostępne są wszystkie inne opcje . Masz pomysł, jak się do tego podejść?

Próbowałem zmieniając innerHTML operatora wybranego w JS:

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

Jednak wynika to w pustym select (Dotyczy to również ręczne ustawianie wielu option s dla wracając do posiadające wszystkie te wymienione powyżej).

Nie mogę wymyślić innego rozwiązania, każda pomoc byłaby ogromnie doceniona.

Answer 1

Spróbuj tego:

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

Pole wyboru nie korzysta z metody innerHTML, należy użyć wartości.

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

Answer 3

Aby manipulować opcje podczas Plugin ID została wybrana:

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

Oto link to fiddle

Answer 4

Oto rozwiązanie jquery.

za każdym razem, gdy pierwszy wybierze zmiany, tworzy nowe opcje z tablicy dla drugiego wyboru. Chodzi tu musiałem zmienić wartości opcją pierwszą wybrać do 0 i 1, aby wybrać opcję, której wartość w tablicy, można manipulować tych później, jeśli są przechowywane te informacje gdzieś

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

    ]; 

    });