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

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

这是工作example

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

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

HTML

SCRIPT

2 个答案: