javascript - 我使用引导多选的下拉列表未填充
问题描述
我正在尝试使用引导 javascript 和 css 文件创建一个多选下拉列表。不幸的是,我动态创建的一组选项(使用 AJAX)似乎没有填充列表。
我知道它一定与多选功能有关,因为当我将它设置为单选下拉菜单时,它工作得很好。
我想知道它是否与何时调用此函数有关。当文档准备好时,不会调用列表,而是在 ajax 调用成功后调用。
这是代码:
function Participants(sid){
console.log(sid);
$('#participants').empty()
$('#participants').append("<option>Loading......</option>");
$.ajax({
method:"POST",
url:"participants_dropdown.php?sid="+sid,
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data){
console.log('success')
$('#participants').empty();
$('#participants').append("<option value='0'>---Select Participants---</option>");
$.each(data, function(i, item){
$('#participants').append('<option value="'+data[i].facility_id+'">Call-Sign: '+data[i].call_sign+' - Operator: '+data[i].operator+' - Primary Programming: '+data[i].primary_programming+'</option>');
});
},
complete: function(){
}
});
$('#participants').multiselect('destroy');
$('#participants').multiselect();
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
<div class="col-md-4">
<h3><span>2) Select Market Participants</span></h3>
<select id="participants" multiple class="form-control">
</select>
</div>
<!---sample JSON
[{"operator":"Nexstar Media Group Inc","owner":"Mission Broadcasting Inc","call_sign":"KRBC-TV","facility_id":"306","primary_programming":"NBC"},{"operator":"Nexstar Media Group Inc","owner":"Nexstar Media Group Inc","call_sign":"KTAB-TV","facility_id":"59988","primary_programming":"CBS"},{"operator":"Prime Time Christian Broadcasting Incorporated","owner":"Prime Time Christian Broadcasting Incorporated","call_sign":"KPCB-DT","facility_id":"77452","primary_programming":"REL"},{"operator":"Sinclair Broadcast Group Inc","owner":"Sinclair Broadcast Group Inc","call_sign":"KTXS-TV","facility_id":"308","primary_programming":"ABC"},{"operator":"TEGNA Inc","owner":"TEGNA Inc","call_sign":"KXVA","facility_id":"62293","primary_programming":"FOX"}]--->
任何指导将不胜感激。我尝试了类似帖子中建议的各种解决方案,但没有运气。
解决方案
在您的 Participants 函数中,您有一个 ajax 调用。因为这是一个异步调用,您需要在成功片段中移动销毁并创建多选:
function Participants(sid){
console.log(sid);
$('#participants').empty()
$('#participants').append("<option>Loading......</option>");
$.ajax({
method:"POST",
url:"participants_dropdown.php?sid="+sid,
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data){
console.log('success')
$('#participants').multiselect('destroy');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HERE
$('#participants').empty();
$('#participants').append("<option value='0'>---Select Participants---</option>");
$.each(data, function(i, item){
$('#participants').append('<option value="'+data[i].facility_id+'">Call-Sign: '+data[i].call_sign+' - Operator: '+data[i].operator+' - Primary Programming: '+data[i].primary_programming+'</option>');
});
$('#participants').multiselect();
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HERE
},
complete: function(){
}
});
}
片段(按钮模拟 ajax 调用):
$('#participants').empty()
$('#participants').append("<option>Loading......</option>");
$('#participants').multiselect();
$('#btn').on('click', function(e) {
var data = [{"operator":"Nexstar Media Group Inc","owner":"Mission Broadcasting Inc","call_sign":"KRBC-TV","facility_id":"306","primary_programming":"NBC"},{"operator":"Nexstar Media Group Inc","owner":"Nexstar Media Group Inc","call_sign":"KTAB-TV","facility_id":"59988","primary_programming":"CBS"},{"operator":"Prime Time Christian Broadcasting Incorporated","owner":"Prime Time Christian Broadcasting Incorporated","call_sign":"KPCB-DT","facility_id":"77452","primary_programming":"REL"},{"operator":"Sinclair Broadcast Group Inc","owner":"Sinclair Broadcast Group Inc","call_sign":"KTXS-TV","facility_id":"308","primary_programming":"ABC"},{"operator":"TEGNA Inc","owner":"TEGNA Inc","call_sign":"KXVA","facility_id":"62293","primary_programming":"FOX"}];
$('#participants').multiselect('destroy');
$('#participants').empty();
$('#participants').append("<option value='0'>---Select Participants---</option>");
$.each(data, function(i, item){
$('#participants').append('<option value="'+data[i].facility_id+'">Call-Sign: '+data[i].call_sign+' - Operator: '+data[i].operator+' - Primary Programming: '+data[i].primary_programming+'</option>');
});
$('#participants').multiselect();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
<div class="col-md-4">
<h3><span>2) Select Market Participants</span></h3>
<select id="participants" multiple class="form-control">
</select>
<button id="btn" class="btn btn-primary">Click Me</button>
</div>
推荐阅读
- node.js - 如何正确配置 apollo graphql + node.js 到谷歌应用引擎
- salesforce - 帐户不应有重复的联系人
- sql - Oracle SQL 显示来自同一个表的匹配数据
- python - Django - 如何构造一个子查询来深入两个外键?
- python - 为什么我的 python kivy 登录表单不起作用?
- excel - 是否有公式可以表示每天单元格值的净变化?
- javascript - 如何从 JavaScript 调用 ASP.NET 函数?
- html - 如何让文本 2 行
- teamcity - Artifactory:jfrog CLI 命令获取特定工件的完整路径
- javascript - 如何让另存为对话框显示在浏览器中以从 ASP.Net Core 3.1 下载文件?