选择另一个选择中的指定选项时更改选择选项

Question

我想知道如何制作这样的东西，所以这是简单的代码：

<select id="cars">
   <option value="default">Select a car</option>
   <option value="bmw">BMW</option>
   <option value="audi">Audi</option>
   <option value="mercedes">Mercedes-Benz</option>
</select>

<select id="models">
   <option value="">Select a model</option>
</select>

我看过这篇文章how to change a selections options based on another select option selected? 但在我的版本中，我想将这些选项放在一个数组中。

var modelsBmw = [“ 3”，“ 5”，“ 7”];
var modelsAudi = [“ A4”，“ A6”，“ A8”];
var modelsMercedes = [“ C”，“ E”，“ S”];

因此，当选择了bmw时，在#models中我想从modelsBmw获得项目。我这样尝试过：

$(document).ready(function() {

$("#cars").change(function() {
    var val = $(this).val();

    if(val=="bmw"){
        $("#models").html(modelsBmw[val]);
    }

    else if(val=="audi"){
        $("#models").html(modelsAudi[val]);
    }

    else if(val=="mercedes"){
        $("#models").html(modelsMercedes[val]);
    }
});

    var modelsBmw = ["3", "5", "7"]; 
    var modelsAudi = ["A4", "A6", "A8"]; 
    var modelsMercedes = ["C", "E", "S"]; });

并尝试使用不带方括号的版本$（“ models”）。html（modelsBmw）;

尝试了这些方法之后，我和我的朋友开始尝试使用for循环来完成该操作，并且它以某种方式起作用，但是附加项目时出现了问题。我的意思是，当我们选择BMW时，一切都很好，但是当您切换到Audi时，该列表不仅包含BMW元素，而且Audi也加入了该列表。

不幸的是，他去上班了，所以我无法在循环中访问此代码版本，因为我们正在使用TeamViewer一起工作。