Question

I have a element in my form.

<select name="states" disabled="disabled" size="10" id="select-states"><optgroup label="Choose State &raquo;&nbsp;">Choose State</optgroup></select>

I would like to replace the above select element with the new <select> i received from AJAX.

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    success: function(msg){
        if(msg == 0) {
            //Query returned empty.
        } else {
            //Query Has values.
            $('#select-states').html(msg);
        }
    }
});

for example the above Ajax Request gives me back the following HTML.

<select name="states" size="10" id="select-states">
    <optgroup label="Choose State">Choose State</optgroup>
    <option value="36">First State</option>
    <option value="37">Second State</option>
    <option value="38">Third State</option>
    <option value="39">Fourth State</option>
</select>

Syntax $('#select-states').html(msg); does not seems to be replacing the content correctly in <select> element. however if i replace it with div it works properly. which is the correct syntax for replacing the <select> element

Answer 1

You were close. Just change this line:

$('#select-states').html(msg);

To:

$('#select-states').replaceWith(msg);

The way you have it right now it will insert your new select into the old one and you’ll get some weird html with two elements with the same id and a select directly inside another, like:

<select name="states" disabled="disabled" size="10" id="select-states">
    <select name="states" size="10" id="select-states">
        <optgroup label="Choose State">Choose State</optgroup>
        <option value="36">First State</option>
        <option value="37">Second State</option>
        <option value="38">Third State</option>
        <option value="39">Fourth State</option>
    </select>
</select>