Показать второй вариант раскрывающегося списка, основанный на первом раскрывающемся списке jquery

Question

Я пытаюсь получить второе раскрывающееся меню, основанное на первом выпадающем списке.

Я нашел отличный сценарий здесь:

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

enter code here 

С этого поста: Jquery Depending on the first Dropdown display/sort a second dropdown?

Однако этот пример показывает "- Все -" вариант, показывающий все группы вместе, и мне нужно сделать что-то точно так же, как

Раскрывается A
Америка
Европа
Азия

Dropdown B
(если выбрана Америка)
Аргентина
Бразилия
Чили

(если Европа выбран)
Италия
Франция
Испания

(если выбрана Азия) Китай
Япония

То, что я пытаюсь получить то же самое, что показано на jsfiddle, но я не хочу иметь «Показать все (группы) "вместе вариант.

Update: После многих попыток я закончил с использованием раствора, отправленный Каталин 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> 

EDIT Как уже упоминалось в комментариях этот метод не поддерживается сафари.вот второе решение, которое должно работать на любом современном браузере:

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