Javascript 基于组合框选择显示特定数据

我有两个组合框。我想根据组合框1的选择在组合框2中显示特定数据

但我想让它成为一个即时选择。。。因此，当我按下组合框1中我想要的选项时，组合框2将填充与此选择匹配的数据

我试图在combobox 1选项上添加一个点击功能，但当我点击它们时，它没有起作用。。。 那么，有什么方法可以做到这一点呢

您应该在选择标记本身（而不是选项标记）上使用更改（非单击）事件。 例如：

Chained是用于链接选择的简单jQuery插件

我在一些项目中使用过这个插件，它工作稳定，正如预期的那样。请随意尝试…

在第一个下拉列表中指定事件处理程序，然后根据所选的值，获取应该放在第二个下拉列表中的值。下面是一个典型的制造商->型号示例：

标记：

​<select id="manufacturers">
    <option></option>
    <option value="Audi">Audi</option>
    <option value="Toyota">Toyota</option>
</select>

<select id="cars">
</select>

​
奥迪
丰田

JavaScript:

​​var cars = {
    Audi: [ 'A2', 'A3', 'A4' ],
    Toyota: [ 'Auris', 'Avalon', 'Yaris' ]
}​​​​;

$("#manufacturers").change(function () {
   var $this = $(this);
   var selectedValue = $this.val();
   if (selectedValue) {
     var $cars = $("#cars").empty();
     var newCars = cars[selectedValue];
     $.each(newCars, function () {
         console.log(this);
       $("<option>" + this + "</option>").appendTo($cars);
     });
   }
});

​​var cars={
奥迪：['A2'，'A3'，'A4']，
丰田：['Auris'，'Avalon'，'Yaris']
}​​​​;
$（“#制造商”）。更改（功能（）{
var$this=$（this）；
var selectedValue=$this.val（）；
如果（selectedValue）{
var$cars=$（“#cars”）.empty（）；
var newCars=车辆[selectedValue]；
$。每个（新车、功能（）{
console.log（this）；
$（“”+此+“”）。附加到（$cars）；
});
}
});

​

​<select id="manufacturers">
    <option></option>
    <option value="Audi">Audi</option>
    <option value="Toyota">Toyota</option>
</select>

<select id="cars">
</select>

​​var cars = {
    Audi: [ 'A2', 'A3', 'A4' ],
    Toyota: [ 'Auris', 'Avalon', 'Yaris' ]
}​​​​;

$("#manufacturers").change(function () {
   var $this = $(this);
   var selectedValue = $this.val();
   if (selectedValue) {
     var $cars = $("#cars").empty();
     var newCars = cars[selectedValue];
     $.each(newCars, function () {
         console.log(this);
       $("<option>" + this + "</option>").appendTo($cars);
     });
   }
});