jQuery 显示/隐藏基于另一个下拉选项的下拉选项答案

【问题标题】：jQuery show/hide drop-down options based on another drop-down optionjQuery 显示/隐藏基于另一个下拉选项的下拉选项
【发布时间】：2013-09-16 08:15:55
【问题描述】：

我正在尝试创建一个包含三个选择框的下拉选择菜单，其中第三个框将根据在第一个选择框中选择的选项显示/隐藏特定选项。

我想知道这里是否有人能够提出解决方案。

这是我拥有的 3 个选择框的简化版本：

<select class="product" id="select_1" name="product">
  <option selected="selected" value=""> Choose Category </option>
  <option value="Mens Suits"> Mens Suits </option>
  <option value="Womens Suit"> Womens Suits </option>
  <option value="Children Suit"> Children Suits </option>
</select>

<select class="color" id="select_2" name="color">
  <option selected="selected" value=""> Choose Color </option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
</select>

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option value="36">36</option>
  <option value="38">38</option>
  <option value="40">40</option>
  <!-- Womens Sizes Below -->
  <option value="30">30</option>
  <option value="29">29</option>
  <option value="28">28</option>
  <!-- Children Sizes Below -->
  <option value="12">12</option>
  <option value="11">11</option>
  <option value="10">10</option>
</select>

通过上面的示例，我希望能够在第一个选择框中的选项 Mens Suits 中查看前 3 个选项（36、38 和 40）被选中。同样，当从第一个框中选择Womens Suits 时，选项30、29 和28 应该在第三个框中可见。童装也是如此。

我希望这是有道理的。谢谢。

【问题讨论】：

你能说出第三个选择会显示隐藏的条件吗？
@Eez，我刚刚更新了帖子。谢谢。
试试这个解决方案http://jsfiddle.net/mcSH5/
@BuDen 这正是我所需要的。谢谢！
@elena 我根据你的情况更新了我的答案。

标签： jquery html forms html-select

【解决方案1】：

我尝试了许多不同的方法，但这个解决方案似乎很合理，并且我已经在我的代码中使用了。无需插件即可使用 jquery 对象进行简单的注册功能

解决方案一目了然：

(function ($) {


$('#showOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', true);
});

$('#hideOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', false);
});

 $.fn.showHideDropdownOptions = function(value, canShowOption) { 

         $(this).find('option[value="' + value + '"]').map(function () {
            return $(this).parent('span').length === 0 ? this : null;
        }).wrap('<span>').hide();

        if (canShowOption) 
            $(this).find('option[value="' + value + '"]').unwrap().show();
        else 
            $(this).find('option[value="' + value + '"]').hide();

}



})(jQuery);

这里是完整的实现http://jsfiddle.net/8uxD7/3/

【讨论】：

【解决方案2】：

使用 selectedIndex 属性隐藏显示第三个选择框

    $("#select_1").on('change',function(){
    if($("#select_1").prop("selectedIndex")==1){
        $('#select_3 option').show(); 
        $('#select_3 option:gt(3)').hide(); 
        //$('#select_3 option:lt(3)').show();
    }else if($("#select_1").prop("selectedIndex")==2){
     $('#select_3 option').show(); 
     $('#select_3 option:lt(4)').hide();   
     $('#select_3 option:gt(6)').hide();   
    }else if($("#select_1").prop("selectedIndex")==3){
     $('#select_3 option').show(); 
     $('#select_3 option:lt(7)').hide();   
    }
});

Demo

【讨论】：

【解决方案3】：

您可以使用 css 类来区分大小并根据类别显示隐藏选项。

    <select class="product" id="select_1" name="product">
        <option selected="selected" value="">Choose Category </option>
        <option value="Mens Suits">Mens Suits </option>
        <option value="Womens Suit">Womens Suits </option>
        <option value="Children Suit">Children Suits </option>
    </select>
    <select class="color" id="select_2" name="color">
        <option selected="selected" value="">Choose Color </option>
        <option value="Blue">Blue</option>
        <option value="Red">Red</option>
        <option value="Green">Green</option>
    </select>
    <select class="size" id="select_3" name="size">
        <option selected="selected" value="">Choose Size </option>
        <!-- Mens Sizes Below -->
        <option value="36" class="men">36</option>
        <option value="38" class="men">38</option>
        <option value="40" class="men">40</option>
        <!-- Womens Sizes Below -->
        <option value="30" class ="women">30</option>
        <option value="29" class ="women">29</option>
        <option value="28" class ="women">28</option>
        <!-- Children Sizes Below -->
        <option value="12" class ="child">12</option>
        <option value="11" class ="child">11</option>
        <option value="10" class ="child">10</option>
    </select>

上面的代码有“men”、“women”和“child”等类来区分大小。

以下脚本可用于实现该功能。

  <script>
        $(document).ready(function () {
            $("select#select_1").on('change', function () {
               if ($(this).val() == "Mens Suits") {
               // Default show the Choose Size Option
                $('#select_3 option:first').attr('selected', 'selected'); 
                $(".men").show();
                $(".women").hide();
                $(".child").hide();
               } else if ($(this).val() == "Womens Suit") {
                $('#select_3 option:first').attr('selected', 'selected');
                $(".women").show();
                $(".men").hide();
                $(".child").hide();
               } else if ($(this).val() == "Children Suit") {
                $('#select_3 option:first').attr('selected', 'selected');
                $(".child").show();
                $(".women").hide();
                $(".men").hide();
               }
            });
        });
    </script>

希望这会有所帮助:)

【讨论】：

【解决方案4】：

试试这个：

HTML：

<select class="product" id="select_1" name="product">
  <option selected="selected" value=""> Choose Category </option>
  <option value="Mens Suits"> Mens Suits </option>
  <option value="Womens Suit"> Womens Suits </option>
  <option value="Children Suit"> Children Suits </option>
</select>

<select class="color" id="select_2" name="color">
  <option selected="selected" value=""> Choose Color </option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
</select>

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option value="Mens_36">36</option>
  <option value="Mens_38">38</option>
  <option value="Mens_40">40</option>
  <!-- Womens Sizes Below -->
  <option value="Womens_30">30</option>
  <option value="Womens_29">29</option>
  <option value="Womens_28">28</option>
  <!-- Children Sizes Below -->
  <option value="Children_12">12</option>
  <option value="Children_11">11</option>
  <option value="Children_10">10</option>
</select>

JQuery:

 $(document).ready(function() {
    $("#select_3").children('option:gt(0)').hide();
    $("#select_1").change(function() {
        $("#select_3").children('option').hide();
        $("#select_3").children("option[value^=" + $(this).val().split(" ")[0] + "]").show()
    })
})

工作Fiddle

【讨论】：

这是一个很好的例子，谢谢！但是，这将是关键字搜索，因此我需要所有选项中的值保持原样，而不是前面有前缀。
嗨 Greenhorm，这在 Chrome 和 firefox 中完美运行。但在 IE10 中不起作用。

【解决方案5】：

有几种方法可以实现这一目标。从您的示例中，我可以看到您只需要 3 个下拉选项中的 2 个进行过滤。这是正确的吗？

请看一下HERE，因为它将涵盖更多场景，而不仅仅是您提到的场景。

具有 3 个相互过滤的下拉选项的示例：EXAMPLE

Hope this helps

【讨论】：

【解决方案6】：

更新了第三选择

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option class="men" value="36">36</option>
  <option class="men" value="38">38</option>
  <option class="men" value="40">40</option>
  <!-- Womens Sizes Below -->
  <option class="women" value="30">30</option>
  <option class="women" value="29">29</option>
  <option class="women" value="28">28</option>
  <!-- Children Sizes Below -->
  <option class="children" value="12">12</option>
  <option class="children" value="11">11</option>
  <option class="children" value="10">10</option>
</select>

jquery 代码。

$("#select_1").change(function(){
     var selectedVal = $(this).val();

    if(selectedVal == "Mens Suits")
    {
     $(".women,.children").hide();
     $(".men").show();
    }
    else if(selectedVal == "Womens Suit")
    {
     $(".men,.children").hide();
     $(".women").show();
    }
    else
    {
     $(".women,.children").hide();
     $(".children").show();
    }
  });

【讨论】：

@trainoasis 尝试禁用选项 $(".women,.children").attr("disabled","disabled");

【解决方案7】：

试试：

var men = '<option selected="selected" value=""> Choose Size </option><option value="36">36</option><option value="38">38</option><option value="40">40</option>';
var women = '<option selected="selected" value=""> Choose Size </option><option value="30">30</option><option value="29">29</option><option value="28">28</option>';
var children = '<option selected="selected" value=""> Choose Size </option><option value="12">12</option><option value="11">11</option><option value="10">10</option>';
$(document).ready(function(){
    $("select#select_1").on('change',function(){
        if($(this).val()=="Mens Suits"){
            $("select#select_3").html(men);
        }else if($(this).val()=="Womens Suit"){
            $("select#select_3").html(women);
        }else if($(this).val()=="Children Suit"){
            $("select#select_3").html(children);
        }
    });
});

DEMO FIDDLE

【讨论】：