jQuery 显示/隐藏基于另一个下拉选项的下拉选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18755872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery show/hide drop-down options based on another drop-down option
提问by elena nincevic
I am trying to create a drop-down select menu that will consist of three select boxes, where the 3rd box will show/hide specific option based on an option selected in the 1st select box.
我正在尝试创建一个包含三个选择框的下拉选择菜单，其中第三个框将根据在第一个选择框中选择的选项显示/隐藏特定选项。
I was wondering if anyone here is be able to suggest a solution to this.
我想知道这里是否有人能够提出解决方案。
Here is a simplified version of the 3 select boxes I have:
这是我拥有的 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>
With the example above, I would like to be able to view the first 3 options from the 3rd select box (36, 38, and 40) when the option Mens Suitsfrom the 1st select box is chosen. Similarly, when the Womens Suitsis selectedfrom the 1st box, the options 30, 29, and 28should be visible in the 3rd box. The same with the Children Suits.
与上面的例子中，我想是能够从第三选择框查看第一3个选项（36，38，和40）当选项Mens Suits被选择从第一选择框。同样，当从Womens Suits第一个框中选择 时30，选项29、 和28应该在第三个框中可见。童装也是一样。
I hope this makes sense. Thank you.
我希望这是有道理的。谢谢你。
回答by Unknown
Try:
尝试：
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);
}
});
});
回答by kinnu
I tried in many different ways but this solution seems reasonable and I have used in my code. No plugins required simple register function with jquery object
我尝试了很多不同的方法，但这个解决方案似乎合理，我已经在我的代码中使用了。没有插件需要使用 jquery 对象的简单注册功能
Solution at glance:
解决方案一目了然：
(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);
Here is the complete implementation http://jsfiddle.net/8uxD7/3/
这是完整的实现http://jsfiddle.net/8uxD7/3/
回答by sudhAnsu63
Updated the 3rd select
更新了第三个选择
<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 code.
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();
}
});
回答by Rameez
Use selectedIndex property to hide show third selection box
使用 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();
}
});
回答by Thanos
There are several ways you can achieve that. From your example i can see that you only require 2 out of the 3 dropdown options to be filtering. Is this correct?
有几种方法可以实现这一目标。从您的示例中，我可以看到您只需要过滤 3 个下拉选项中的 2 个。这样对吗？
Please have a look HEREas it will cover many more scenarios that just the one you are mentioning.
请查看此处，因为它将涵盖更多场景，而不仅仅是您提到的场景。
An example with 3 dropdown options that filter each other: EXAMPLE
具有 3 个相互过滤的下拉选项的示例：示例
Hope this helps
回答by Greenhorn
Try this:
尝试这个：
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()
})
})
Working Fiddle
工作小提琴
回答by Surama Hotta
You can use css classes to distinguish the Sizes and show hide the options based on the category.
您可以使用 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>
The above code having classes like "men", "women" and "child"` to distinguish the sizes.
上面的代码有像“男人”、“女人”和“孩子”这样的类来区分大小。
Following script can be used to achieve the functionality.
以下脚本可用于实现该功能。
<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>
Hope this will help :)
希望这会有所帮助:)
