根据第一个下拉列表选择jquery显示第二个下拉列表选项

问题描述

我在这里找到了一个很棒的脚本：

 在此输入代码
  

从这篇文章：

但是，此示例显示 - 全部 - 选项，将所有组合显示在一起，我需要像

下载一个

美国

欧洲

亚洲

下拉式B

（如果选择美国）

阿根廷

巴西

智利

（如果选择欧洲）

意大利

法国

西班牙

（如果选择亚洲）
中国

日本

'试图获得是相同的显示在那个jsfiddle，但我不想有一个显示所有（组）在一起选项。

更新：
经过多次尝试，我最终使用Catalin Berta在他的网站上发布的解决方案：

该网址的最终结果是这样的：

此解决方案适用于所有主流浏览器。

解决方案

我没有看到问题只是放在对应的部分所有的东西，你完成了。

查看：

jQuery：

<$ on（'change'，function（）{
var val = $（this））$ {code $ val（）;
var sub = $（'＃sub_groups'）;
$（'option'，sub）.filter（function（）{
if（
$这个）.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'） ger（'change'）;
}）;

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

From this post:Jquery Depending on the first Dropdown display/sort a second dropdown?

However this example shows a "-- All --" option showing all the groups together and I need to do something just like

Dropdown A
America
Europe
Asia

Dropdown B
(if America is selected)
Argentina
Brazil
Chile

(if Europe is selected)
Italy
France
Spain

(if Asia is selected)China
Japan

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.

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/

The final result from that URL is something like this:http://jsfiddle.net/c510xdrj/

This solution works on all major browsers.

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.

Take a look: JSnippet Demo

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>

EDITAs mentioned in the comments this method is not supported by safari. here is a second solution that should work on any modern browser:

JSnippet DEMO

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显示第二个下拉列表选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！