jQuery show/hide drop-down options based on anothe

Question

I am trying to create a drop-down select menu that will consist of three select boxes, where the 3rd box will show/hide specific option based on an option selected in the 1st select box.

I was wondering if anyone here is be able to suggest a solution to this.

Here is a simplified version of the 3 select boxes I have:

<select class="product" id="select_1" name="product">
  <option selected="selected" value=""> Choose Category </option>
  <option value="Mens Suits"> Mens Suits </option>
  <option value="Womens Suit"> Womens Suits </option>
  <option value="Children Suit"> Children Suits </option>
</select>

<select class="color" id="select_2" name="color">
  <option selected="selected" value=""> Choose Color </option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
</select>

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option value="36">36</option>
  <option value="38">38</option>
  <option value="40">40</option>
  <!-- Womens Sizes Below -->
  <option value="30">30</option>
  <option value="29">29</option>
  <option value="28">28</option>
  <!-- Children Sizes Below -->
  <option value="12">12</option>
  <option value="11">11</option>
  <option value="10">10</option>
</select>

With the example above, I would like to be able to view the first 3 options from the 3rd select box (36, 38, and 40) when the option Mens Suits from the 1st select box is chosen. Similarly, when the Womens Suits is selectedfrom the 1st box, the options 30, 29, and 28 should be visible in the 3rd box. The same with the Children Suits.

I hope this makes sense. Thank you.

Answer 1

I tried in many different ways but this solution seems reasonable and I have used in my code. No plugins required simple register function with jquery object

Solution at glance:

(function ($) {


$('#showOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', true);
});

$('#hideOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', false);
});

 $.fn.showHideDropdownOptions = function(value, canShowOption) { 

         $(this).find('option[value="' + value + '"]').map(function () {
            return $(this).parent('span').length === 0 ? this : null;
        }).wrap('<span>').hide();

        if (canShowOption) 
            $(this).find('option[value="' + value + '"]').unwrap().show();
        else 
            $(this).find('option[value="' + value + '"]').hide();

}



})(jQuery);

Here is the complete implementation http://jsfiddle.net/8uxD7/3/

Answer 2

Use selectedIndex property to hide show third selection box

    $("#select_1").on('change',function(){
    if($("#select_1").prop("selectedIndex")==1){
        $('#select_3 option').show(); 
        $('#select_3 option:gt(3)').hide(); 
        //$('#select_3 option:lt(3)').show();
    }else if($("#select_1").prop("selectedIndex")==2){
     $('#select_3 option').show(); 
     $('#select_3 option:lt(4)').hide();   
     $('#select_3 option:gt(6)').hide();   
    }else if($("#select_1").prop("selectedIndex")==3){
     $('#select_3 option').show(); 
     $('#select_3 option:lt(7)').hide();   
    }
});

Demo

Answer 3

Try:

var men = '<option selected="selected" value=""> Choose Size </option><option value="36">36</option><option value="38">38</option><option value="40">40</option>';
var women = '<option selected="selected" value=""> Choose Size </option><option value="30">30</option><option value="29">29</option><option value="28">28</option>';
var children = '<option selected="selected" value=""> Choose Size </option><option value="12">12</option><option value="11">11</option><option value="10">10</option>';
$(document).ready(function(){
    $("select#select_1").on('change',function(){
        if($(this).val()=="Mens Suits"){
            $("select#select_3").html(men);
        }else if($(this).val()=="Womens Suit"){
            $("select#select_3").html(women);
        }else if($(this).val()=="Children Suit"){
            $("select#select_3").html(children);
        }
    });
});

DEMO FIDDLE

Answer 4

There are several ways you can achieve that. From your example i can see that you only require 2 out of the 3 dropdown options to be filtering. Is this correct?

Please have a look HERE as it will cover many more scenarios that just the one you are mentioning.

An example with 3 dropdown options that filter each other: EXAMPLE

Hope this helps

Answer 5

You can use css classes to distinguish the Sizes and show hide the options based on the category.

    <select class="product" id="select_1" name="product">
        <option selected="selected" value="">Choose Category </option>
        <option value="Mens Suits">Mens Suits </option>
        <option value="Womens Suit">Womens Suits </option>
        <option value="Children Suit">Children Suits </option>
    </select>
    <select class="color" id="select_2" name="color">
        <option selected="selected" value="">Choose Color </option>
        <option value="Blue">Blue</option>
        <option value="Red">Red</option>
        <option value="Green">Green</option>
    </select>
    <select class="size" id="select_3" name="size">
        <option selected="selected" value="">Choose Size </option>
        <!-- Mens Sizes Below -->
        <option value="36" class="men">36</option>
        <option value="38" class="men">38</option>
        <option value="40" class="men">40</option>
        <!-- Womens Sizes Below -->
        <option value="30" class ="women">30</option>
        <option value="29" class ="women">29</option>
        <option value="28" class ="women">28</option>
        <!-- Children Sizes Below -->
        <option value="12" class ="child">12</option>
        <option value="11" class ="child">11</option>
        <option value="10" class ="child">10</option>
    </select>

The above code having classes like "men", "women" and "child"` to distinguish the sizes.

Following script can be used to achieve the functionality.

  <script>
        $(document).ready(function () {
            $("select#select_1").on('change', function () {
               if ($(this).val() == "Mens Suits") {
               // Default show the Choose Size Option
                $('#select_3 option:first').attr('selected', 'selected'); 
                $(".men").show();
                $(".women").hide();
                $(".child").hide();
               } else if ($(this).val() == "Womens Suit") {
                $('#select_3 option:first').attr('selected', 'selected');
                $(".women").show();
                $(".men").hide();
                $(".child").hide();
               } else if ($(this).val() == "Children Suit") {
                $('#select_3 option:first').attr('selected', 'selected');
                $(".child").show();
                $(".women").hide();
                $(".men").hide();
               }
            });
        });
    </script>

Hope this will help :)

Answer 6

Updated the 3rd select

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option class="men" value="36">36</option>
  <option class="men" value="38">38</option>
  <option class="men" value="40">40</option>
  <!-- Womens Sizes Below -->
  <option class="women" value="30">30</option>
  <option class="women" value="29">29</option>
  <option class="women" value="28">28</option>
  <!-- Children Sizes Below -->
  <option class="children" value="12">12</option>
  <option class="children" value="11">11</option>
  <option class="children" value="10">10</option>
</select>

jquery code.

$("#select_1").change(function(){
     var selectedVal = $(this).val();

    if(selectedVal == "Mens Suits")
    {
     $(".women,.children").hide();
     $(".men").show();
    }
    else if(selectedVal == "Womens Suit")
    {
     $(".men,.children").hide();
     $(".women").show();
    }
    else
    {
     $(".women,.children").hide();
     $(".children").show();
    }
  });