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

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

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

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

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

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

• javascript
• jquery
• html

4 Answers 4

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.

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

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

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

Chained is simple jQuery plugin for chained selects

http://www.appelsiini/projects/chained

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