Question

I have 2 drop downs, I would like to know whether there is a possibility to display and hide some of the options in second drop down based on value selected in first dropdown.

<script language="JavaScript">
 function funchk(){
  document.getElementById('z').style.display="block";

  }

    </script>


    <select name="first" onchange="funchk();">
       <option name="asw" value="a">sda</option>
       <option name="sd" value="sd">ZZ</option>
    <option name="rdf" value="afe">fe</option>
       <option name="bfe" value="bfe">fe3</option>
       </select>         <?php echo "<br/>" ?>
     <select name="second">
      <option name="a" value="a">aa</option>
         <option name="z" value="a" style="display:none">ZZ</option>
        <option name="r" value="a" style="display:none">aa</option>
         <option name="b" value="b">bb</option>
         </select>

Here i would like to display the ‘z’ option in 2nd dropdown to be displayed when onchging value of first dropdown.

Answer 1

No, you can’t rely on setting the CSS to show/hide <option> elements.

You’ll need to remove them, or just simply disable/enable them.

function funchk() {
    document.getElementsByName('z')[0].disabled = false;
}

---

<select name="second">
    <option name="a" value="a">aa</option>
    <option name="z" value="a" disabled="disabled">ZZ</option>
    <option name="r" value="a" disabled="disabled">aa</option>
    <option name="b" value="b">bb</option>
</select>