[RESOLVED]Make visible one of the options in the second list if the second option is selected in the first list

Hi,

i have two drop-down lists. I want to make visible one of the options in the second list if the second option is selected in the first list.

I found an example but this enables/disables the option and the script must be directly below the html code in order to work: http://jsfiddle.net/LcpaV/

If you want to only display the second drop-down element if the second index is selected on your other drop-down, you can use the selectedIndex (accessed through the jQuery prop() function) property to help
determine that : 

<script type='text/javascript'>
    $(document).ready(function(){
      //When this element's selection changes
      $("#first").change(function(){
        //If the second item is selected display the other dropdown
        if($(this).prop('selectedIndex') == 1){
          //The second index is selected - show the second list
            $("#second").show();
        }
        else{
          //Otherwise keep it hidden
            $("#second").hide();
        }
      });
    });
</script>

Working Example

You could further simplify this example by using the jQuery toggle function that would toggle the visibility of your second list based on a condition (in this case the selected element of your first dropdown) : 

<script type='text/javascript'>
    $(document).ready(function(){
      //When this element's selection changes
      $("#first").change(function(){
        //If the second item is selected display the other dropdown
        $("#second").toggle($(this).prop('selectedIndex') == 1);
      });
    });
</script>

Toggle Example

Leave a Reply