根据组合框选择显示特定数据

Display specific data based on a combo box selection

本文关键字：数据 显示 选择 组合      更新时间：2023-09-26

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

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

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

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

标记：

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

​演示。

您应该在select标记本身（而不是选项标记）上使用change（而不是click）事件。示例：

$('#combo1').change(function() {
     // Load new content for #combo2 here
});

$('select.option1').change(function() {
    // fill option2 with data from somewhere
});

Chained是一个简单的jQuery插件，用于链式选择

http://www.appelsiini.net/projects/chained

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

相关文章：