[英]My dropdown list using bootstrap multiselect not populating
我正在嘗試使用引導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"}]--->
任何指導將不勝感激。 我嘗試了類似帖子中建議的各種解決方案,但沒有運氣。
在您的參與者函數中,您有一個ajax調用。 因為這是一個異步調用,所以您需要在成功片段內移動destroy並創建multiselect :
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.