CODEWITHSUNDEEP
javascriptjqueryhtml
shiro
shiro

Reputation: 255

jquery html manipulation does not work on the select inputs

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

Upvotes: 0

Views: 344

Answers (7)

Guffa
Guffa

Reputation: 700680

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

Upvotes: 3

HaBo
HaBo

Reputation: 14307

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

Upvotes: 0

Simon Edstr&#246;m
Simon Edstr&#246;m

Reputation: 6619

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/

Upvotes: 0

CompanyDroneFromSector7G
CompanyDroneFromSector7G

Reputation: 4517

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.

Upvotes: 0

Joakim Johansson
Joakim Johansson

Reputation: 3194

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

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

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.

Upvotes: 0

Rich O&#39;Kelly
Rich O&#39;Kelly

Reputation: 41767

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.

Upvotes: 1

Related Questions