使用jQuery选择选项时隐藏表单选项

Question

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>

Answer 1

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

Answer 2

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") .