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

I have 2 combo boxes. I want to display specific data in combo box 2 based on combobox 1 selection.

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

But I want to make it an ontime selection ... so when I press on the option I want from combobox 1 , combobox 2 is filled with data matching this selection.

但我想让它成为准时选择......所以当我按下我想要的组合框1选项时,组合框2充满了与此选择匹配的数据。

I tried to put an on click function on combobox 1 options, but it didn't work when I click on them ... So is there some method to do so ?

我尝试在combobox 1选项上放置一个on click功能,但是当我点击它们时它没有用...所以有一些方法可以这样做吗?

4 个解决方案

#1

Assign the change event handler on the first dropdown, and then, based on the selected value, fetch the values that ought to be put in the second dropdown. Here's a typical manufacturer -> model example:

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

Markup:

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

DEMO.

#2

You should use the change (not click) event on the select tag itself (not on the option tag). Example:

您应该在select标记本身上使用更改(而不是单击)事件(而不是在选项标记上)。例:

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

#3

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

#4

Chained is simple jQuery plugin for chained selects

链接是链接选择的简单jQuery插件

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

I've used this Plugin in some Projects and it works stable and as expected. Feel free to try it…

我在一些项目中使用过这个插件,它的工作稳定且符合预期。随意试试吧......

#1