select.append添加选项但下拉列表仍为空

时间:2016-08-04 18:20:16

标签: jquery

我使用jquery ajax调用填充下拉列表。

 $.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);
            }
        });

当我调试时,我可以看到成功方法被执行。但下拉菜单在UI上仍然显示为空。我正在使用jquery 1.11.3和IE8。 (不要问我为什么作为组织的要求)。请帮帮我。

1 个答案:

答案 0 :(得分:0)

请使用以下代码在select中添加选项。

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

//使用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(''));