CODEWITHSUNDEEP
jqueryhtmlformshtml-select
elena nincevic
elena nincevic

Reputation: 83

jQuery show/hide drop-down options based on another drop-down option

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.

Upvotes: 2

Views: 31054

Answers (7)

kinnu
kinnu

Reputation: 51

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/

Upvotes: 2

Rameez
Rameez

Reputation: 1712

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

Upvotes: 1

Surama Hotta
Surama Hotta

Reputation: 130

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 :)

Upvotes: 0

Greenhorn
Greenhorn

Reputation: 1700

Try this:

Html:

<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="Mens_36">36</option>
  <option value="Mens_38">38</option>
  <option value="Mens_40">40</option>
  <!-- Womens Sizes Below -->
  <option value="Womens_30">30</option>
  <option value="Womens_29">29</option>
  <option value="Womens_28">28</option>
  <!-- Children Sizes Below -->
  <option value="Children_12">12</option>
  <option value="Children_11">11</option>
  <option value="Children_10">10</option>
</select>

JQuery:

 $(document).ready(function() {
    $("#select_3").children('option:gt(0)').hide();
    $("#select_1").change(function() {
        $("#select_3").children('option').hide();
        $("#select_3").children("option[value^=" + $(this).val().split(" ")[0] + "]").show()
    })
})

Working Fiddle

Upvotes: 0

Thanos
Thanos

Reputation: 3059

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

Upvotes: 1

sudhansu63
sudhansu63

Reputation: 6180

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();
    }
  });

Upvotes: 1

Kiran
Kiran

Reputation: 20313

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

Upvotes: 5

Related Questions