Question

Please refer to http://jsfiddle.net/7FfMd/6/

run the code, then select “E” from the drop down, another input box appear, however I cannot select option B from the second input.

How can I fix it.

For some reason, I when I select option “D” from the first input again, the second select box does not update too.

Thanks

Answer 1

That’s because you catch the change event on the div that surrounds both dropdowns. When you change the second dropdown, the event handler will be triggered and remove the dropdown where you made the selection and replace it with a new dropdown.

If you want to bind the change event to the parent element, you need to check in which dropdown the change was made (using event.target), so that you don’t recreate all the dropdowns. If you use delegate to bind the event handler, this will contain the element where the change was made:

jQuery('.change').delegate('select', 'change', function() { ... });

It might be simpler to bind the event for each select, then you don’t have to check wich dropdown that caused the event. If you use delegate, you can bind the event eventhough the element doesn’t exist yet, but you need to put a class, name or id on the dropdowns so that they can be identified:

jQuery('.change').delegate('#firstDropdown', 'change', function() { ... });
jQuery('.change').delegate('#secondDropdown', 'change', function() { ... });