Internet Explorer inserting select options from ajax call

Question

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>

Solved. I'm still not sure what the problem was, but if I use div tags instead of option tags.
one
Then replace ajax function with: $('#newOptions div', resp).each(function(i, d){ $('#dropdown').append( $('');}); — Eric, Jun 13 '12 at 18:53
You're correct about the bad markup, but once you correct that you don't need to change your JavaScript. I just came across the same solution moments ago when troubleshooting your page. — Sampson, Jun 13 '12 at 18:58

score 1 · Answer 1 · edited May 23 '17 at 10:34

1

You should try

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

Also have a look at this answer

edited May 23 '17 at 10:34

Community

1
1

answered Jun 13 '12 at 17:24

Subir Kumar Sao

8,171
3
26
47

I think the problem is the way jquery is handling the option tags in IE, not the appending. – Eric Jun 13 '12 at 17:46

Sampson · Answer 2 · 2012-06-13T19:08:12.557

1

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

edited Jun 13 '12 at 19:08

answered Jun 13 '12 at 17:25

Sampson

265,109
74
539
565

Sorry, that was just a type-o. It still does not work for me. http://users.csc.tntech.edu/~elkrohnfel21/testing/select.html – Eric Jun 13 '12 at 17:35
@Eric Which version of IE are you testing against? This is working just fine for me in IE10. – Sampson Jun 13 '12 at 18:17

Internet Explorer inserting select options from ajax call

2 Answers2