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

所以我是Wordpress的新手，正在研究一个制作汽车平台的主题。不幸的是，在主题上，汽车销售功能与我们需要的不同。其中之一是：显示或隐藏基于先前选择的下拉列表选项。

快速示例：如果在"Make"上选择了"BMW"，则在'Model"上仅显示"1系列"、"3系列"answers"5系列"，如果选择了"3系列，则在"Engine"上仅显示318i 320i 330i，aso。从逻辑的角度来看，这很容易，但我不知道如何将其翻译成代码。幸运的是，我已经在这里找到了相当好的代码，但这只适用于下一个下拉列表。我的问题是，javascript/jquery代码必须是什么样子才能使有两个以上的条件下拉列表？您可以以Engine为例。谢谢

HTML代码：

<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代码：

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