Come faccio a far corrispondere questa categoria di menu a discesa con la mia altra categoria a discesa?

Question

Ho cercato e scavato e trovato le domande con le risposte che ho pensato stavano per aiutare, ma non ha mai fatto.
Non riesco a farlo funzionare. Ho già fatto una domanda riguardo a questo problema e sono stato diretto altrove e ancora nessun dado.

 <br>Make:<br> 
     <select id="make" name="make" required> 
      <option value="default">Select make...</option> 
      <option class="alfaRomeo" value="alfaRomeo">Alfa Romeo</option> 
      <option class="abarth" value="abarth">Abarth</option> 
      <option class="astonMartin" value="astonMartin">Aston Martin</option> 
      <option class="audi" value="audi">Audi</option> 
      <option class="ford" value="ford">Ford</option> 
     </select><br> 

     <br>Model:<br> 
     <select id="model" name="model" required> 
      <option value="default">Select Model...</option> 
      <!--ALFA ROMEO--> 
      <option value="4cSpider" class="selectors alfaRomeo">4C Spider</option> 
      <option value="4c" class="selectors alfaRomeo">4C</option> 
      <option value="giulQuad" class="selectors alfaRomeo">Giulietta Quadrifoglio Verde</option> 
      <option value="giulietta" class="selectors alfaRomeo">Giulietta</option> 
      <option value="mitoQuad" class="selectors alfaRomeo">MiTo Quadrifoglio</option> 
      <option value="mito" class="selectors alfaRomeo">MiTo</option> 
      <!--FORD--> 
      <option value="focus" class="selectors ford">Focus</option> 
      <option value="f350" class="selectors ford">F-350</option> 
     </select><br> 

     <script> 

      $(document).ready(function() {  
       var allOptions = $('#model option') 
       $('#make').change(function() { 
        $('#model option').remove() 
        var classN = $('#make option:selected').prop('class'); 
        var opts = allOptions.filter('.' + classN); 
        $.each(opts, function (i, j) { 
         $(j).appendTo('#model'); 
        }); 
       }); 
      }); 

     </script> 

Answer 1

Non è solo l'errore di battitura qui?

appendTo('#mdoel'); 

jQuery collegamento da aggiungere prima di questo script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

Answer 2

L'approccio più semplice sarebbe quella di mostrare solo/Nascondi opzioni basate sulla classe dell'opzione selezionata nel #make di selezione. Tuttavia questo non funzionerà in IE poiché non supporta la protezione degli elementi option.

cosa si può fare è quindi di clonare le opzioni originali e quindi aggiungere quelli filted alla seconda selezionare:

$(document).ready(function() { 
    var $model = $('#model'); 
    var allOptions = $('#model').find('option').clone(); 
    $('#make').change(function() { 
     var classN = $(this).find('option:selected').prop('class'); 
     $model.find('option:gt(0)').remove(); 
     allOptions.filter('.' + classN).appendTo($model); 
    }); 
}); 

Demo:http://jsfiddle.net/u1ah58jz/

Answer 3

Una soluzione qui è quello di convertire le opzioni per il modellare su dati JSON, quindi caricare dinamicamente l'elenco quando vengono apportate modifiche. Fiddle here.

<br>Make:<br> 
<select id="make" name="make" required> 
    <option value="default">Select make...</option> 
    <option class="alfaRomeo" value="alfaRomeo">Alfa Romeo</option> 
    <option class="abarth" value="abarth">Abarth</option> 
    <option class="astonMartin" value="astonMartin">Aston Martin</option> 
    <option class="audi" value="audi">Audi</option> 
    <option class="arrinera" value="arrinera">Arrinera</option> 
    <option class="acura" value="acura">Acura</option> 
    <option class="ford" value="ford">Ford</option> 
</select><br> 

<br>Model:<br> 
<select id="model" name="model" required> 
    <option value="default">Select Model...</option> 
</select><br> 

e lo script:

var models = [ 
    { "make": "alfaRomeo", "value": "4cSpider", "text": "4C Spider" }, 
    { "make": "alfaRomeo", "value": "4c",  "text": "4C" }, 
    { "make": "alfaRomeo", "value": "giulQuad", "text": "Giulietta Quadrifoglio Verde" }, 
    { "make": "alfaRomeo", "value": "giulietta", "text": "Giulietta" }, 
    { "make": "alfaRomeo", "value": "mitoQuad", "text": "MiTo Quadrifoglio" }, 
    { "make": "alfaRomeo", "value": "mito",  "text": "MiTo" }, 
    { "make": "ford",  "value": "focus",  "text": "Focus" }, 
    { "make": "ford",  "value": "f350",  "text": "F-350" } 
]; 


$('#make').change(function() { 
    var select = $("#model"); 
    var make = $(this).val(); 

    //Clear all options 
    select.find('option').remove(); 

    //add relevant options 
    for (var i=0; i < models.length; i++) { 
     if (models[i].make == make) 
      $("<option />") 
      .attr("value", models[i].value) 
      .text(models[i].text) 
      .appendTo(select); 
    } 
});