CODEWITHSUNDEEP
javascriptjqueryhtml
Chris Francis
Chris Francis

Reputation: 5

Hiding Form Options when selecting an option with jquery

I am trying to have certain options of a dropdown display/hide when an option from a proceeding dropdown menu is selected, a friend sent me this sort of format for the script but i cant figure out how to get it to work as im not the most experienced with jquery and javascript but this worked for him (he was using text links instead of options in a dropdown)

HTML

<form class="form-horizontal" role="form">
            <div class="form-group">
            <label for="location" class="col-sm-4 control-label">Choose a Location</label>
            <div class="col-sm-8">
                <select id="selection" class="form-control">
                <option selected="selected" value="none">None</option>
                <option value="Dubai">Dubai</option>
                <option value="bora">Bora Bora</option>
                <option value="vancouver">Vancouver</option>
                <option value="rio">Rio De Janeiro</option>
                </select>
            </div><br></br>
            <label for="length" class="col-sm-4 control-label">Choose a Resort</label>
            <div class="col-sm-8">
                <select class="form-control">
                <option id="none">None</option>
                <option class="location dubai">Resort 1</option>
                <option class="location dubai">Resort 2</option>
                <option class="location bora">Resort 3</option>
                <option class="location bora">Resort 4</option>
                <option class="location vancouver">Resort 5</option>
                <option class="location rio">Resort 6</option>
                </select>
            </div><br></br>

SCRIPT

<script src="assets/jquery-1.11.1.min.js"></script>
    <script>

    $(document).ready(function(){
    $("#selection").change(function(){
        var selection = $(this).val();
        if(selection == "none"){
            $("#none").find(".location").show();
        }else{
            $("#none").find(".location").not("."+selection).hide();
            $("."+selection).show();    
        }
    });
});

    </script>

Upvotes: 0

Views: 73

Answers (2)

sagar43
sagar43

Reputation: 3456

Here Is the complete code

HTML

<select id="firstSelect">
   <option value="0" selected="selected">None...</option>
    <option value="dubai">Dubai</option>
                <option value="bora">Bora Bora</option>
                <option value="vancouver">Vancouver</option>
                <option value="rio">Rio De Janeiro</option>
</select>

<select id="secondSelect">
   <option value="0" selected="selected">None...</option>
    <option class="location dubai">Resort 1</option>
                <option class="location dubai">Resort 2</option>
                <option class="location bora">Resort 3</option>
                <option class="location bora">Resort 4</option>
                <option class="location vancouver">Resort 5</option>
                <option class="location rio">Resort 6</option>

</select>

JScript 

$(function(){
    var conditionalSelect = $("#secondSelect"),
        // Save possible options
        options = conditionalSelect.children(".location").clone();

    $("#firstSelect").change(function(){
        var value = $(this).val();                  
        conditionalSelect.children(".location").remove();
        options.clone().filter("."+value).appendTo(conditionalSelect);
    }).trigger("change");
});

Here is the working example

Upvotes: 1

Inanda Menezes
Inanda Menezes

Reputation: 1804

Change the value of dubai option from Dubai to 'dubai', because it is case sensitive and make it like this:

 $(document).ready(function(){
    $("#selection").change(function(){
        var selection = $(this).val();        
        if(selection == "none"){
            $(".location").show();
        }else{           
            $(".location").not("."+selection).hide();
            $("."+selection).show();    
        }
    });
})

YOu can also set a ID to the select like: <select id ="locSelect" class="form-control"> and then use the selection like this $("#locSelect .location").

Upvotes: 0

Related Questions