基于先前选择的条件列表选项

Question

So I am a newbie on Wordpress working with a theme to make a car platform. Unfortunately, on the theme, the car-selling functionalities differ from what we need. One of those things is: show or hide options based on previous selection with dropdown lists.

Quick example: If 'BMW' is chosen on 'Make', then only show '1 series' '3 series' '5 series' on 'Model', if '3 series is chosen, then only show 318i 320i 330i on 'Engine', aso. From a logical point of view, it is so easy, but I have no clue how to translate this into code. Luckily, I've found pretty good code here already, but this works only for the next dropdown list. My question is, how does the javascript/jquery code have to look like so you can make more than 2 conditional dropdown lists? You could take Engine as an example. Thank you

HTML code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="req_make">Make</label>
<select id="req_make" name="make">
    <option disabled="disabled" selected="selected" value="">Choose Make</option>
    <option class="BMW" value="BMW">BMW</option>
    <option class="Audi" value="Audi">Audi</option>
    <option class="VW" value="VW">VW</option>
</select>

<label for="req_model">Model</label>
<select id="req_model" name="model">
    <option disabled="disabled" selected="selected" value="">Choose model</option>
    <option class="BMW" value="1er">1er</option>
    <option class="BMW" value="3er">3er</option>
    <option class="BMW" value="5er">5er</option>
    <option class="BMW" value="7er">7er</option>
    <option class="Audi" value="A4">A4</option>
    <option class="Audi" value="A8">A8</option>
    <option class="Audi" value="Q7">Q7</option>
    <option class="VW" value="Golf">Golf</option>
    <option class="VW" value="Touran">Touran</option>
</select>

<label for="req_engine">Engine</label>
<select id="req_engine" name="engine">
<option disabled="disabled" selected="selected" value="">Choose engine</option>
<option class="BMW" value="7er">7er - 730i</option>
<option class="BMW" value="7er">7er - 730Li</option>
<option class="BMW" value="7er">7er - 735i</option>
</select>

Javascript code:

$(function(){
    $("#req_make").on("change",function(){
        var levelClass = $('#req_make').find('option:selected').attr('class');
        console.log(levelClass);
        $('#req_model option').each(function () {
            var self = $(this);
            if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
                self.show();
            } else {
                self.hide();
            }
        });
    });
});

Answer 1

You can specify any number of selectors to combine into a single result. So change $('#req_model option').each(function () { ... to $('#req_model option, #req_engine option').each(function () { ... to solve this.