根据第一个下拉选择显示第二个下拉选项jquery
我想根据第一个下拉选择获取第二个下拉选项。根据第一个下拉选择显示第二个下拉选项jquery
我发现这里有很大的脚本:
http://jsfiddle.net/heera/Gyaue/
enter code here
从这个帖子: Jquery Depending on the first Dropdown display/sort a second dropdown?
但是这个例子显示了 “ - 全部 - ” 选项显示所有的组一起,我需要做的事情就像
下拉A
美国
欧洲
亚洲
下拉乙
(如果美国选择)
阿根廷
巴西
智利
(如果欧洲选择)
意大利
法国
西班牙
(如果亚洲被选中) 中国
日本
我想要得到的是对的jsfiddle显示的一样,但我不希望有一个“显示所有(团体)“一起选项。
更新: 多次尝试后,我结束了使用发表克特林贝尔塔在他的网站解决方案:http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/
从URL最后的结果是这样的: http://jsfiddle.net/c510xdrj/
这解决方案适用于所有主流浏览器。
感谢Shlomi Hassid的帮助。
我没有看到问题出在哪里,放下与所有东西相对应的部分,就完成了。
的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浏览器支持的评论中提到。这里是一个应该在任何现代浏览器中运行第二个解决方案:
的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');
});
正是我在找的!非常感谢你和周五愉快! –
您好,很抱歉重新开启此主题,该脚本在Internet Explorer和Safari上无法使用。你有任何建议使它与这两个(重要的)浏览器一起工作吗?非常感谢你。 –
你是对的 - 我甚至都不认为这不被这两个人所支持......增加了第二个解决方案 - 很脏但很好的支持 –
请分享你“似乎无法得到完全正确” –
你的意思是代码显示或更改? –