问题描述
我正在尝试根据第一个下拉列表选择获得第二个下拉列表.
I am trying to get a second dropdown based on first dropdown selection.
我在这里找到了一个很棒的脚本:
I found a great script here:
http://jsfiddle.net/heera/Gyaue/
enter code here
来自这篇文章:Jquery 依赖于第一个 Dropdown 显示/排序 a第二个下拉菜单?
然而,这个例子显示了一个-- All --"选项,将所有组显示在一起,我需要做一些类似的事情
However this example shows a "-- All --" option showing all the groups together and I need to do something just like
下拉列表A
美国
欧洲
亚洲
Dropdown A
America
Europe
Asia
下拉B
(如果选择了美国)
阿根廷
巴西
智利
Dropdown B
(if America is selected)
Argentina
Brazil
Chile
(如果选择了欧洲)
意大利
法国
西班牙
(if Europe is selected)
Italy
France
Spain
(如果选择了亚洲)中国
日本
(if Asia is selected)China
Japan
我想要得到的与那个 jsfiddle 上显示的相同,但我不想有一个显示所有(组)"选项.
What I'm trying to get is the same shown on that jsfiddle but I don't want to have a "Show all (groups)" together option.
更新:经过多次尝试,我最终使用了 Catalin Berta 在其网站上发布的解决方案:http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/
Update:After many tries I ended up using the solution posted by Catalin Berta on his website at: http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/
那个 URL 的最终结果是这样的:http://jsfiddle.net/c510xdrj/
The final result from that URL is something like this:http://jsfiddle.net/c510xdrj/
此解决方案适用于所有主要浏览器.
This solution works on all major browsers.
感谢 Shlomi Hassid 的帮助.
Thanks to Shlomi Hassid for your help.
推荐答案
我不明白问题出在哪里,只需删除与所有内容相对应的部分即可.
I don't see where the problem is just drop the part that correspond to the all stuff and you are done.
看一看:JSnippet 演示
jQuery:
$(function(){
$('#groups').on('change', function(){
var val = $(this).val();
var sub = $('#sub_groups');
$('option', sub).filter(function(){
if (
$(this).attr('data-group') === val
|| $(this).attr('data-group') === 'SHOW'
) {
$(this).show();
} else {
$(this).hide();
}
});
});
$('#groups').trigger('change');
});
HTML:
<select id="groups">
<option value='America'>America</option>
<option value='Europe'>Europe</option>
<option value='Asia'>Asia</option>
<select>
<select id="sub_groups">
<option data-group='SHOW' value='0'>-- Select --</option>
<option data-group='America' value='Argentina'>Argentina</option>
<option data-group='America' value='Brazil'>Brazil</option>
<option data-group='America' value='Chile'>Chile</option>
<option data-group='Europe' value='Italy'>Italy</option>
<option data-group='Europe' value='France'>France</option>
<option data-group='Europe' value='Spain'>Spain</option>
<option data-group='Asia' value='China'>China</option>
<option data-group='Asia' value='Japan'>Japan</option>
<select>
编辑如评论中所述,safari 不支持此方法.这是适用于任何现代浏览器的第二种解决方案:
EDITAs mentioned in the comments this method is not supported by safari. here is a second solution that should work on any modern browser:
jQuery:
$(function(){
$('#groups').on('change', function(){
var val = $(this).val();
var sub = $('#sub_groups');
$('option', sub).filter(function(){
if (
$(this).attr('data-group') === val
|| $(this).attr('data-group') === 'SHOW'
) {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap( "<span>" ).parent().hide();
}
}
});
});
$('#groups').trigger('change');
});
这篇关于根据第一个下拉选择 jquery 显示第二个下拉选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!