How do I make this dropdown category correspond with my other dropdown category?

Question

I have searched and dug and found questions with answers that I thought were going to help, but never did.
I just cannot get this to work. I have already asked a question regarding this issue and I was directed elsewhere and still no dice.

        <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

Its not just the typo here is it?

appendTo('#mdoel');

jQuery link to be added before this script

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

Answer 2

The simplest approach would be to just show/hide options based on the class of the selected option in the #make select. However this will not work in IE since it doesn't support hiding option elements.

What you can do then is to clone original options and then append filted ones to the second select:

$(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 options for the model to JSON data, then dynamically load the list when the make changes. 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>

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