Question

这是我第一次尝试通过ajax对html控件进行数据绑定。我检查/调试我的ajax调用并检索数据，但是没有出现在select选项中。我的javascript位于我的aspx页面的底部。有什么问题

  $(function () {
           $.ajax({
               type: "POST",
               url: "psHlp.asmx/getDistricts",
               data: "{}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (msg) {
                   $("#District").empty();

                   $.each(msg.d, function () {
                       $("#District").append($("<option></option>").val(this['Value']).html(this['Text']));
                   });


               },
               error: function () {
                   alert("Failed to load districts");
               }
           });
       });

这是我的选择选项，位于我的页面开头

<div class="col-sm-3 col-xs-12 ffield">
                                        <select id="District" style="display: none;">

                                        </select>
                                    </div>

Answer 1

您需要在(index,value)回调函数中指定$.each参数并使用value来访问迭代元素。这样的事情。

$.each(msg.d, function (index,value) {
    $("#District").append("<option value='" + value.Value + "'>" + value.Text + "</option>");
});

Answer 2

尝试在每个循环中使用这样的方法。

var options;
$.each(msg.d, function () {
 options +=  '<option value="' + this["Value"] + '">' + this["Text"] + '</option>';
});
console.log(options);
$("#District").append(options);

Answer 3

最后我找到了解决方案。以上所有建议都是正确的。之所以出现这个问题，是因为我使用了bootstarp js / css（客户的设计者提供了布局），所以我需要在追加后重建multiselect选项。

 var options = "";
    $.each(response.d, function () {

        options += '<option value="' + this['Value'] + '">' + this['Text'] + '</option>';
    });
    $("#Town").append().html(options);

    $("#Town").multiselect('rebuild');

希望这会帮助至少一个人：）

选择选项不显示数据

3 个答案: