选择选项不显示数据答案

【问题标题】：Select option does not show data选择选项不显示数据
【发布时间】：2016-06-08 05:09:42
【问题描述】：

这是我第一次尝试通过 ajax 对 html 控件进行数据绑定。我检查/调试我的 ajax 调用，数据检索正常，但未出现在选择选项中。我的 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>

【问题讨论】：

标签： javascript jquery asp.net ajax data-binding

【解决方案1】：

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

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

【讨论】：

是的@phreakv6也是正确的，你可以在上面代码的函数中传递参数，使用value你可以加载值。
我也尝试了您的建议，但未在选择选项中填充值。这是日志消息。如您所见，值已填充，但未出现在选择选项上。有些东西阻止它绑定
@Maria h，因此您在循环中获得了正确的 HTML 结构。所以尝试一次像这样使用 ' $("select#District").html(options); '。希望这对你有用。
它仍然无法正常工作。我决定将我的选择选项作为服务器控件并以“旧方式”绑定它。希望下次我尝试使用 ajax 时会有愉快的结局

【解决方案2】：

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

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

【讨论】：

谢谢，但是没有用。我在显示 value['value'] 的循环中添加了一个警报函数并正确显示所有行。怎么回事？？？？？？
你能设置一个小提琴或者给我完整的 ajax 调用 url 吗？ "psHlp.asmx/getDistricts"
它不是公共网络服务。这是我本地 .net 应用程序的一部分
在$.each() 中执行console.log(value) 时看到的输出是什么

【解决方案3】：

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

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

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

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

希望这至少能帮助一个人:)

【讨论】：