根據第一個下拉選擇jquery顯示第二個下拉選項

Question

我試圖根據第一次下拉選擇獲得第二次下拉。

我在這里找到一個很棒的劇本：

http://jsfiddle.net/heera/Gyaue/

enter code here

從這篇文章： Jquery根據第一個下拉顯示/排序第二個下拉列表？

然而，這個例子顯示了一個“ - 全 - ”選項，顯示所有組在一起，我需要做一些事情

下拉列表A.
美國
歐洲
亞洲

下拉列表B.
（如果選擇了美國）
阿根廷
巴西
智利

（如果選擇了歐洲）
意大利
法國
西班牙

（如果選擇亞洲）中國
日本

我想要獲得的是同樣的jsfiddle，但我不希望有一個“顯示所有（組）”一起選項。

更新：經過多次嘗試后，我最終使用了Catalin Berta在其網站上發布的解決方案： http ：//devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

該URL的最終結果是這樣的： http ： //jsfiddle.net/c510xdrj/

此解決方案適用於所有主流瀏覽器。

感謝Shlomi Hassid的幫助。

Answer 1

我沒有看到問題出在哪里，只是刪除與所有東西相對應的部分，你就完成了。

看看： 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>

編輯正如評論中所提到的，safari不支持此方法。 這是第二個適用於任何現代瀏覽器的解決方案：

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');
});