html - How to change options of a select using JavaScript -

i have html page in have 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> 

what i'd happen checkvalidoption() make if "plugin id" selected in field option equals (and it's selected) , otherwise other options available. idea on how approach this?

i tried changing innerhtml of operator select in js:

document.getelementbyid("operator").innerhtml =     "<option value='equals'>equals</option>"; 

however results in empty select (this include manually setting many options going having ones listed above).

i can't think of solution, appreciated.

try this:

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') {         (i = 0; < operator.options.length; ++i) {             if (operator.options[i].value != 'equals') {                 operator.options[i].disabled = true;             }         };         operator.value = 'equals';     } else {         (i = 0; < operator.options.length; ++i) {             operator.options[i].disabled = false;         };     } }