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

如何重新运行脚本并根据事件进行更新

1 个答案: