CODEWITHSUNDEEP
ajaxinternet-explorerjqueryjquery-selectorshtml-select
Eric
Eric

Reputation: 11

Internet Explorer inserting select options from ajax call

This seams to work in firefox and chrome, but not internet explorer. I need this to work in internet explorer.

IE is appending the opening tag and not the inner text and closing tag. Thanks in advance.

JS:

function go() {
   $.post("ajax-select.html", "", function(resp){
      $('#dropdown').append($('#newOptions option', resp));
   }
}

HTML:

<body>
   <select id="dropdown">
   </select>
   <input type="submit" value="go" onclick="go();" />
</body>

ajax-select.html:

<div>
   <div id="newOptions">
      <option value="opOne">one</option>
      <option value="opTwo">two</option>
   </div>
</div>

Upvotes: 1

Views: 885

Answers (2)

Sampson
Sampson

Reputation: 268344

Your response is not correct. The actual HTML coming back is:

<div>
  <div id="newOptions">
    <div value="opOne">one</div>
    <div value="opTwo">two</div>
  </div>
</div>

Correct it, and all works properly:

<div>
  <select id="newOptions">
    <option value="opOne">one</option>
    <option value="opTwo">two</option>
  </select>
</div>

With the above markup (options properly nested within a select element), you can continue using the following:

$(function(){
    $("input[value='go']").on("click", function(){
        $.post("ajax-select.html", function(resp){
            $(resp).find("option").appendTo("#dropdown");
        });
    });
});

Upvotes: 1

Subir Kumar Sao
Subir Kumar Sao

Reputation: 8401

You should try

$('#dropdown').html($('#newOptions option', resp));

Also have a look at this answer

Upvotes: 1

Related Questions