javascript - ZF2- Can't hide select options on Zend\Element\Select -

i'm working on zf2 , i'm trying set 2 dependent dropdowns using javascript. began trying hide options second select field when firest changed.

this form :

$this->add(array(             'type' => 'zend\form\element\select',             'name' => 'category_list',             'options' => array(                     'label' => 'event category ',                     'style' => 'display:none;',                     'value_options' => array(                                                 ),             ),              'attributes'=> array(                     'id'=>'list1',                     'onchange'=>'hide()'             )     ));      $this->add(array(             'type' => 'zend\form\element\select',             'name' => 'subcateg_list',             'options' => array(                     'label' => 'type incident ',                     'style' => 'display:none;',                     'value_options' => array(                                                 )),                     'attributes'=> array(                             'id'=>'list2'                     )             )); 

note select fields filled on controller class !

and javascript function :

function hide()     {     var op = document.getelementbyid("list2").getelementsbytagname("option");     (var = 0; < op.length; i++) {          ? op[i].disabled = true          : op[i].disabled = false ;     }  } 

but when first select field changed nothing heppens. problem ?

your code should throw syntax error. ternary oparator (?:) expects condition check against. see: http://en.wikipedia.org/wiki/%3f:#javascript

(condition) ? alert('true') : alert('false'); 

as fouad fodail suggested -> jquery example:

function hide() {     $('#list2 option').each(function() {         $(this).prop('disabled', condition);                              // ^-- not forget change     }); } 

note: disabled attribute of tag not supported in internet explorer 7 , earlier versions.
(http://www.w3schools.com/tags/att_option_disabled.asp)

another example, disable second <select id="select2">, if first <select id="select1"> has been changed:

$('#select1').change(function() {     $('#select2').prop('disabled', true); }); 

(untested)

docs

• http://api.jquery.com/change/
• http://api.jquery.com/each/
• http://api.jquery.com/prop/