1

I am populating dropdown using jquery ajax call.

 $.ajax({
            type: "POST",
            url: "Appointment.aspx/BindAssociates",
            data: "{storeNumber:" + StoreNum + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(result){
                var rs = result.d;
                var selectAdd = $("#MST_CPH_AddAppointment_ddlAptAssociateName");
                var selectView = $("#MST_CPH_ViewAppointments_ddlViewAptAssociateName");

                for (var i = 0; i < rs.length; i++) {
                    var opt = rs[i].trim().toUpperCase();
                    //var optView = rs[i].trim();
                    selectAdd.append(new Option(opt,opt));
                    selectView.append(new Option(opt,opt));

                }
            },
            error: function(result){
                alert("Failed to load dropdown" + result);
            }
        });

When i debug I can see that success method is executed. but dropdowns still show empty on UI. I am using jquery 1.11.3 and IE8. (Don't ask me why as its the organization requirement). Please help me with this.

Prabi
  • 173
  • 1
  • 14
  • Bug report: [In IE8 .append does not append option elements correctly](https://bugs.jquery.com/ticket/11492) -> _closed (wont fix)_ – Andreas Aug 04 '16 at 18:28
  • Possible duplicate of [Adding options to a – Andreas Aug 04 '16 at 18:29
  • thanks a lot for letting me know. let me try the alternative – Prabi Aug 04 '16 at 18:40

1 Answers1

0

Please use below code to append option in select.

$.each(rs, function (i, item) {
    selectAdd.append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
    selectView.append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
});

//alternative using javascript

$.each(rs, function(key, item)
{
  output.push('<option value="'+ item.value +'">'+ item.text +'</option>');
});

document.getElementById('MST_CPH_AddAppointment_ddlAptAssociateName').innerHTML = (output.join(''));

document.getElementById('MST_CPH_ViewAppointments_ddlViewAptAssociateName').innerHTML = (output.join(''));
Rahul Patel
  • 5,248
  • 2
  • 14
  • 26
  • Hey thanks for replying. I just tried this code but dropdown is showing empty. If i debug i see that it goes through this code but nothing is showing in the dropdown. i don't know whats happening. – Prabi Aug 04 '16 at 18:35
  • Can you please share the your response look a like? – Rahul Patel Aug 04 '16 at 18:36
  • i think options are there but they are not visible somehow because when i open the dropdown it opens a long as if there are many options. – Prabi Aug 04 '16 at 18:36
  • also if i use IE10 and jquery 3.0 it works perfectly fine. but I have to get this working on IE8 – Prabi Aug 04 '16 at 18:37
  • May be the options are generated but the text may not be appended. Can you please do inspect element and check what exactly happening over there? – Rahul Patel Aug 04 '16 at 18:38
  • @Prabi Please try with my alternative way also from the update answer. – Rahul Patel Aug 04 '16 at 18:45