jQuery HTML操作不适用于选择输入

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() { ... });

Answer 2

You were not getting the val of the input, but were getting the val of the div containing the input:

var testVar= jQuery('#placeholder2').val();

Should be

var testVar = jQuery('#placeholder2 select').val();

Also, the change subscriber should only be on the select, not the div also (to avoid the event firing when the second select is changed):

jQuery('.change').change(function() {

Should be

jQuery('.change select').change(function() {

See here for updated version.

Answer 3

The problem is that you've bound the change event handler to the <div> element that contains both <select> elements. Whenever you change any of those <select> elements, the change event bubbles up to the <div> . That works fine for the first one, but when you change the second it's firing that code again and replacing the entire <select> element.

Answer 4

That's because you're accessing the selected value with

var testVar= jQuery('#placeholder2').val();

This tries to get .val() from the div, not the select. Try this:

var testVar= jQuery('#placeholder2 select').val();

Answer 5

Don't forget that when you add new elements, your previously applied methods won't have been applied to them.

You will need to apply the event code to the new elements.

Answer 6

You are creating a div that have the class .change. So the function are handled by all change by its children.

Have a look at this code:

http://jsfiddle.net/7FfMd/13/

Answer 7

your jquery was wrong. here is my answer Markup is as below

<div class='change'>
    <div id="placeholder2" style="width:600px;">
        <select>
            <option selected="selected">D</option>
        <option >E</option>
        </select>
    </div>
    <div id="placeholder" style="width:600px;"></div>
</div>

jQuery should be like this.

jQuery('#placeholder2>select').change(function(){   
    var testVar= $(this).val();
    alert(testVar);
    if (testVar == "D")
    {
        var htmlString = '<select><option>C</option></select>';
        jQuery('#placeholder').html(htmlString);
    } else
    {
        var htmlString = '<select><option>A</option><option>B</option></select>';
        jQuery('#placeholder').html(htmlString);
    }
});