php - Setting properties on option from select list using Javascript -

i attempting add existing script created developer. aim show item dropdownlist in instances , hide in others. added bit of code , realised have been told trying select not exist. here have running?

var menunav = document.getelementbyid("dir_drop"); var menuval = menunav.options[menunav.selectedindex].value;   menunav.options["member"].show(); 

html:

<div id="dir-dropdown"  >     <select id="dir_drop">      <option value="">-- navigate here --</option>  <?php if ($pageorg->getshowtabsmembers() == "1"){ ?>      <option value="member" onchange="return clearprintqueue();">members</option>  <?php } ?>    <?php if ($pageorg->getshowtabsfamilies() == "1"){ ?>       <option value="family" onchange="return clearprintqueue();">families</option>   <?php } ?>   <?php if ($pageorg->getshowtabsgroups() == "1"){ ?>       <option value="group" onchange="return clearprintqueue();">groups</option>  <?php } ?>  <?php if ($pageorg->getshowtabschurchstaff() == "1"){ ?>        <option value="staff" onchange="return clearprintqueue();">church staff</option> <?php } ?>     </select> 

the error see in firefox is: "typeerror: menunav.options.family undefined"

i appreciate input towards solution of problem.

the options takes index -- not current text. have iterate , find current text so:

for (var = 0; < menunav.options.length; i++) {     if (menunav.options[i].text == "members") {         //found index text "members" -- logic     } }