Question

I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?

Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit

The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don’t want anything to be selected when the add button is clicked

Answer 1

The fact that you’re working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.

You’re using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:

$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)

This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it’s a simple matter of finding the dropdown’s parent row and then locating the corresponding child with the appropriate class to be shown.