使用jQuery選擇選項時隱藏表單選項

Question

我試圖從下拉菜單中選擇一個選項時會顯示/隱藏下拉菜單的某些選項，一位朋友向我發送了這種格式的腳本，但我無法弄清楚如何使其正常工作，因為我不是最有jquery和javascript經驗的人，但這對他很有用（他使用文本鏈接而不是下拉菜單中的選項）

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

這是完整的代碼

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

這是工作示例

Answer 2

將迪拜選項的價值從迪拜更改為“迪拜”，因為它區分大小寫，並使其如下所示：

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

您還可以為選擇設置ID，例如： <select id ="locSelect" class="form-control">然后使用類似$("#locSelect .location") 。