title: Setting properties on option from select list using Javascript
body: <p>I am attempting to add to an existing script that was created by another developer. The aim is to show an item from a dropdownlist in some instances and hide in others. I added a bit of code and I realised I have been told that what i am trying to select does not exist. Here is what I have running?</p>
  
  <pre><code>var menuNav = document.getElementById("Dir_Drop");
  var MenuVal = menuNav.options[menuNav.selectedIndex].value;
  
  
  menuNav.options["member"].show();
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="dir-dropdown"  &gt;   
   &lt;select id="Dir_Drop"&gt;
       &lt;option value=""&gt;-- Navigate Here --&lt;/option&gt;
   &lt;?php if ($pageOrg-&gt;getShowTabsMembers() == "1"){ ?&gt;
       &lt;option value="member" onchange="return ClearPrintQueue();"&gt;Members&lt;/option&gt;
   &lt;?php } ?&gt;  
   &lt;?php if ($pageOrg-&gt;getShowTabsFamilies() == "1"){ ?&gt; 
       &lt;option value="family" onchange="return ClearPrintQueue();"&gt;Families&lt;/option&gt;
    &lt;?php } ?&gt;
    &lt;?php if ($pageOrg-&gt;getShowTabsGroups() == "1"){ ?&gt; 
       &lt;option value="group" onchange="return ClearPrintQueue();"&gt;Groups&lt;/option&gt;
   &lt;?php } ?&gt;
   &lt;?php if ($pageOrg-&gt;getShowTabsChurchStaff() == "1"){ ?&gt;  
       &lt;option value="staff" onchange="return ClearPrintQueue();"&gt;Church Staff&lt;/option&gt;
  &lt;?php } ?&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>   </p>
  
  <p>The error I see in firefox is: "TypeError: menuNav.options.family is undefined"</p>
  
  <p>I would greatly appreciate any input towards the solution of this problem.</p>