Question

I have a selectbox under a hidden div, I did a function that when I click in some place the select box appears with the correct option, but it doesn’t render well, the control don’t work properly, this is the code:

$(function () {
    $('.NewDiv').click(function () {
        $(this).append($('#MySelectBox'));
        $('#MySelectBox').val($(this).attr('value'));
    });
});

<select id="MySelectBox>
    <option...
</select>

I tried with append, html and text, all of them render the select box but it doesn’t work properly proved on Chrome and Firefox.

Thanks!

Answer 1

The reason you’re seeing this issue is because you’re tying the event to the div, the same div that is now containing the select box. Therefore, when you select an option, it changes the option to ‘0’ as it reads no value.

This example fixes your issue.