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

Hiding Form Options when selecting an option with jquery

本文关键字：选项 隐藏 表单 使用 选择 jquery      更新时间：2023-09-26

当选择正在进行的下拉菜单中的选项时，我正在尝试显示/隐藏的某些选项，一位朋友向我发送了这种脚本格式，但我无法弄清楚如何让它工作，因为我不是对 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>

这是完整的代码

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

这是工作示例

将迪拜选项的值从迪拜更改为"迪拜"，因为它区分大小写并使其如下所示：

 $(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")选择。

相关文章：