3

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

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

我试图在组合框 1 选项上放置一个单击功能，但是当我单击它们时它不起作用......那么有什么方法可以做到吗？

4

4 回答 4

3

在第一个下拉列表中分配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);
     });
   }
});

​演示 。

于 2012-08-26T13:24:47.840 回答
2

您应该在选择标签本身（而不是选项标签）上使用更改（而不是点击）事件。例子：

$('#combo1').change(function() {
     // Load new content for #combo2 here
});
于 2012-08-26T13:12:14.120 回答
2 
$('select.option1').change(function() {
    // fill option2 with data from somewhere
});
于 2012-08-26T13:12:17.530 回答
1

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

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

我在一些项目中使用了这个插件，它工作稳定并且符合预期。随意尝试......</p>

于 2012-08-26T13:14:15.420 回答