javascript - 如何根据事件重新运行脚本和更新

Question

我正在尝试获取以下代码，以根据第一个下拉菜单中的选择更新二级下拉菜单。我知道代码在我测试过后可以正常工作，但它在我的网站上不起作用，我发现问题是由我正在使用的另一个插件引起的。

该解决方案在另一篇文章中有所描述，但我缺乏 Javascipt 知识来在我的脚本中实现它。

发布解决方案:Jquery-nice-select plugin not working properly )

我相信解决方案说明我首先需要确保在对第一个下拉菜单进行更改后重新运行 jquery，然后我需要更新 Select 元素 (#carlist)，最后是包含第二个的 div下拉菜单(#topline)。

我的代码在下面，如果有人可以概述我需要添加此脚本来完成此操作的代码，我将不胜感激。

<script>
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList() {
    var carList = document.getElementById("car");
    var modelList = document.getElementById("carmodel");
    var selCar = carList.options[carList.selectedIndex].value;
    while (modelList.options.length) {
        modelList.remove(0);
    }
    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
} 
</script>

<div class="col-lg-2 form-cols">
    <div class="make">
        <select id="car" onchange="ChangeCarList()"> 
            <option value="">-- Car --</option> 
            <option value="VO">Volvo</option> 
            <option value="VW">Volkswagen</option> 
            <option value="BMW">BMW</option> 
        </select> 
    </div> 	
</div>	
<div class="col-lg-3 form-cols" onselect="Data()">
    <div id="output">
        <select id="carmodel"></select> 
    </div>
<div>

Answer 1

这是一个使用 JQuery 重写的简单函数。应该为你工作... JSBin Example确保添加了 jquery 库。

var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList() {
  let car = $('#car').val();
  $('#carmodel option').remove();
  if(car !== ''){
    carsAndModels[car].forEach(modelType => {
      $('#carmodel').append($("<option></option>")
       .attr("value",modelType)
       .text(modelType)); 
    });  
  }
}