How do I make this drop-down category match my other drop-down category?

Question

I searched and dug up and found questions with answers that I thought would help, but never did.
I just can't get this to work. I already asked a question about this problem, and I was sent to another place and there are still no cubes.

<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

Isn't that just a typo here?

 appendTo('#mdoel'); 

JQuery link to add before this script

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

Answer 2

The easiest approach is to simply show / hide parameters based on the class of the selected parameter in #make select. However, this will not work in IE, since it does not support hiding option elements.

What you can do is clone the original parameters, and then add the final ones to the second choice:

 $(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

One solution here is to convert the model parameters to JSON data, and then dynamically load the list when make is changed. Here is the script .

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

And the 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); } });