無法附加選項多選

Question

我有一個multipleSelect，它是動態使用JavaScript創建的，我目前無法在其中添加選項。

下面是一個Fiddle

這裏是我的嘗試：

$(selectEventTypeAssetId).append($('<option value="1"').text("2")); 
$(selectEventTypeAssetId).html($('<option value="1"').text("2")); 
$(selectEventTypeAssetId).html('<option value="1">234</option>'); 
$(selectEventTypeAssetId).append('<option value="1">234</option>'); 
$(selectEventTypeAssetId).text('<option value="1">234</option>'); 

這些都不似乎幫助。

任何幫助，將不勝感激。

Answer 1

你的問題是，因爲你需要之前，新option元素追加實例化multipleSelect插件的元素，像這樣：

var $selectEventTypeAssetId = $('<select id="eventTypeSelect" class="form-control" />').appendTo('.alertTypeMultipleSelect'); 
$selectEventTypeAssetId.append('<option value="1">234</option>'); 

$('.alertTypeMultipleSelect').multipleSelect({ 
    placeholder: "Event Type", 
    selectAll: false, 
    width: "100%", 
    filter: true, 
    sort: true, 
}); 

Updated fiddle

Answer 2

var newOption = new Option(key, value, true, false); 
$("#selectEventTypeAssetId").append(newOption).trigger('change'); 

Answer 3

試試這個，

$selectEventTypeAssetId = $("<select id='eventTypeSelect' class='form-control'>"); 
 
$selectEventTypeAssetId.html("<option value='1'>One</option>"); 
 
$(".alertTypeMultipleSelect").append($selectEventTypeAssetId); 
 
$('select').multipleSelect({ 
 
    selectAll: false, 
 
    width: "100%", 
 
    filter: true, 
 
    sort: true, 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.js"></script> 
 
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/> 
 
<div class="form-group"> 
 
    <label>Event Type:</label> 
 
    <div class="alertTypeMultipleSelect"></div> 
 
</div>

我對動態創建select元素做了一些更改。