Come modificare le opzioni di una selezione utilizzando JavaScript

Question

Ho una pagina HTML in cui ho 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> 

Quello che mi piacerebbe che accada è che checkValidOption() potrebbe fare in modo che, se si seleziona "Plugin ID" nel campo che l'unica opzione è equals (ed è selezionato) e comunque sono disponibili tutte le altre opzioni . Qualche idea su come affrontare questo?

Ho provato a cambiare il innerHTML dell'operatore selezionare in JS:

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

Tuttavia questo si traduce in un vuoto select (questo sarebbe anche comprendere l'impostazione manuale delle molte option s per tornare ad avere tutte quelle elencate sopra).

Non riesco a pensare ad un'altra soluzione, qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Prova questa:

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

Un campo di selezione non utilizza il metodo innerHTML, è necessario utilizzare il valore.

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

Answer 3

Per manipolare opzioni quando Plugin ID è stato selezionato:

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

Ecco un link to fiddle

Answer 4

ecco una soluzione jquery.

ogni volta che la prima selezione cambia, produce nuove opzioni da una matrice per la seconda selezione. problema qui è che ho avuto per modificare i valori di opzione del primo scegliere di 0 e 1 per selezionare quale valore nella matrice, è possibile manipolare quelli in seguito, se si memorizzano queste informazioni da qualche parte

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

    ]; 

    });