Mostra le seconde opzioni a discesa in base alla prima selezione a discesa jquery

Question

Sto cercando di ottenere un secondo elenco a discesa in base alla prima selezione a discesa.

Ho trovato una grande sceneggiatura qui:

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

enter code here 

da questo post: Jquery Depending on the first Dropdown display/sort a second dropdown?

Tuttavia questo esempio mostra un "- Tutto -" l'opzione che mostra tutti i gruppi insieme e ho bisogno di fare qualcosa proprio come

Dropdown A
America del
Europa
Asia

discesa B
(se è selezionato America)
Argentina
Brasile
Cile

(se si seleziona Europa)
Italia
Francia
Spagna

(se si seleziona Asia) Cina
Giappone

Quello che sto cercando di ottenere è lo stesso mostrato che jsfiddle ma non vuole avere un "Mostra tutto (gruppi) "insieme opzione.

Aggiornamento: Dopo molti tentativi ho finito per usare la soluzione postato da Catalin Berta sul suo sito web all'indirizzo: http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

Il risultato finale di tale URL è qualcosa di simile: http://jsfiddle.net/c510xdrj/

Questo soluzione funziona su tutti i principali browser.

Grazie a Shlomi Hassid per il vostro aiuto.

Answer 1

Non vedo dove il problema è solo cadere la parte che corrisponde a tutte le cose e il gioco è fatto.

Date un'occhiata: 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 Come accennato nei commenti di questo metodo non è supportato da Safari.qui è una seconda soluzione che dovrebbe funzionare su qualsiasi browser moderno:

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