Javascript 从AJAX调用返回的数据显示在Bootstrap Multiselect下拉列表中的问题

我使用的是从中选择的引导程序

然而，我的下拉列表并没有显示我的结果……甚至没有显示我的结果。不确定这是否有什么不同，但我在模态中使用了它，我在边AngularJS上使用了它

这是我应该放在HTML页面上的全部内容（根据上面的网站）：

我正在对我的服务进行以下AJAX调用：

function loadPrimaryCategories() {

    $.ajax({
        url: '/Portal/api/PrimaryCategories/GetAll',
        type: 'GET',
        dataType: 'json',
        success: function (data) {     
            $.each(data, function(i, primaryCategory) {
                $("#primaryCategory-dropdown").append('<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>');
            });
        },
        error: function(data) {
            alert(data);
        }
    });
}

函数loadPrimaryCategories（）{
$.ajax({
url:“/Portal/api/primarycegories/GetAll”，
键入：“GET”，
数据类型：“json”，
成功：函数（数据）{
$.each（数据、函数（i、主要类别）{
$（“#primaryCategory下拉列表”）.append（“”+primaryCategory.Name+“”）；
});
},
错误：函数（数据）{
警报（数据）；
}
});
}

我正在得到结果（确切地说，我有57个）：

2004考试
第341次会议
遗弃

但是按钮没有打开以显示我的结果。当我点击它时，它将启用和禁用。当我更改style='display:block'时，您还可以看到一个滚动列表框显示所有值。它看起来好像没有正确地绑定

---

我遵循与此示例相同的说明，但一旦我将其实现到解决方案中，它就不起作用了：

尝试在成功方法中添加刷新调用：

$.ajax({
url: '/Portal/api/PrimaryCategories/GetAll',
type: 'GET',
dataType: 'json',
success: function (data) {     
    $.each(data, function(i, primaryCategory) {
        $("#primaryCategory-dropdown").append('<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>');
    });
    $("#primaryCategory-dropdown").multiselect('refresh');
},
error: function(data) {
    alert(data);
}
});

$.ajax({
url:“/Portal/api/primarycegories/GetAll”，
键入：“GET”，
数据类型：“json”，
成功：函数（数据）{
$.each（数据、函数（i、主要类别）{
$（“#primaryCategory下拉列表”）.append（“”+primaryCategory.Name+“”）；
});
$（“#primaryCategory下拉列表”）.multiselect（'refresh'）；
},
错误：函数（数据）{
警报（数据）；
}
});

尝试在成功方法中添加刷新调用：

$.ajax({
url: '/Portal/api/PrimaryCategories/GetAll',
type: 'GET',
dataType: 'json',
success: function (data) {     
    $.each(data, function(i, primaryCategory) {
        $("#primaryCategory-dropdown").append('<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>');
    });
    $("#primaryCategory-dropdown").multiselect('refresh');
},
error: function(data) {
    alert(data);
}
});

$.ajax({
url:“/Portal/api/primarycegories/GetAll”，
键入：“GET”，
数据类型：“json”，
成功：函数（数据）{
$.each（数据、函数（i、主要类别）{
$（“#primaryCategory下拉列表”）.append（“”+primaryCategory.Name+“”）；
});
$（“#primaryCategory下拉列表”）.multiselect（'refresh'）；
},
错误：函数（数据）{
警报（数据）；
}
});

我找到了

我需要在ajax调用中添加“async:false”

我找到了它

---

我需要在我的ajax调用中添加“async:false”

试试这个，您将100%获得预期的输出

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script src="bootstrap-2.3.2.min.js" type="text/javascript"></script>

<script src="bootstrap-multiselect.js" type="text/javascript"></script> 


<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            contentType: "application/json",
            data: "{}",
            url: "multiselect.aspx/BindStates",
            dataType: "json",
            async: false,
            success: function(data) {
                var select = $("#ddlState");

                select.children().remove();
                if (data.d) {
                    $(data.d).each(function(key,value) {
                      $("#ddlState").append($("<option></option>").val(value.State_id).html(value.State_name));                      
                    });                    
                }
             $('#ddlState').multiselect({includeSelectAllOption: true});
             $("#ddlState").multiselect('refresh');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                debugger;
            }
        });
    });
</script>

    <center>
        <select id="ddlState" name="ddlState" multiple="multiple">
        </select>

    </center>
</div>

$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
contentType:“应用程序/json”，
数据：“{}”，
url:“multiselect.aspx/BindStates”，
数据类型：“json”，
async:false，
成功：功能（数据）{
var select=$（“#ddlState”）；
选择.children（）.remove（）；
如果（数据d）{
$（data.d）。每个（函数（键、值）{
$（“#ddlState”）.append（$（“”）.val（value.State_id）.html（value.State_name））；
});                    
}
$（'#ddlState'）.multiselect（{includecelloption:true}）；
$（“#ddlState”）.multiselect（'refresh'）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
调试器；
}
});
});

在顶部包含此css

---

试试这个，100%您将获得预期的输出

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script src="bootstrap-2.3.2.min.js" type="text/javascript"></script>

<script src="bootstrap-multiselect.js" type="text/javascript"></script> 


<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            contentType: "application/json",
            data: "{}",
            url: "multiselect.aspx/BindStates",
            dataType: "json",
            async: false,
            success: function(data) {
                var select = $("#ddlState");

                select.children().remove();
                if (data.d) {
                    $(data.d).each(function(key,value) {
                      $("#ddlState").append($("<option></option>").val(value.State_id).html(value.State_name));                      
                    });                    
                }
             $('#ddlState').multiselect({includeSelectAllOption: true});
             $("#ddlState").multiselect('refresh');
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                debugger;
            }
        });
    });
</script>

    <center>
        <select id="ddlState" name="ddlState" multiple="multiple">
        </select>

    </center>
</div>

$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
contentType:“应用程序/json”，
数据：“{}”，
url:“multiselect.aspx/BindStates”，
数据类型：“json”，
async:false，
成功：功能（数据）{
var select=$（“#ddlState”）；
选择.children（）.remove（）；
如果（数据d）{
$（data.d）。每个（函数（键、值）{
$（“#ddlState”）.append（$（“”）.val（value.State_id）.html（value.State_name））；
});                    
}
$（'#ddlState'）.multiselect（{includecelloption:true}）；
$（“#ddlState”）.multiselect（'refresh'）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
调试器；
}
});
});

在顶部包含此css

我用

$（“#ddlState”）.multiselect（'refresh'）
但这对我不起作用

但当我将“刷新”替换为“重建”时，它可以工作：

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

我试过使用
$（“#ddlState”）.multiselect（'refresh'）
但这对我不起作用

但当我将“刷新”替换为“重建”时，它可以工作：

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

您可能在使用AJAX调用更新选项列表之前加载multiselect.js文件，因此在执行multiselect.js文件时，有空选项列表用于应用multiselect函数。
因此，首先通过AJAX调用更新选项列表，然后启动multiselect调用，您将获得带有动态选项列表的下拉列表

希望这能帮到你

//多选下拉列表相关的js和css文件

[
[


//加载页面时应调用此函数
var loadParentTaskList=函数（）{
$.ajax({
url:yoururl，
方法：“POST”，
成功：功能（数据）{
//要添加来自AJAX的选项列表，请调用multiselect
for（数据中的var字段）{
$（''+数据[field].name+''）.appendTo（'父任务'）；
}
//要启动multiselect调用，请执行以下操作：
$（“#父任务”）.multiselect({
includeSelectAllOption:true
})
}
});
}
//具有id父任务的多选下拉列表
你可能是个傻瓜
let htmldata=""
$.each(data, function(i, primaryCategory) {
             htmldata+=   '<option value="' + primaryCategory.Id + '">' + primaryCategory.Name + '</option>';
            }); 
$("#primaryCategory-dropdown").html(htmldata);
    
},