我有以下JS代码，我要重新加载我的模态，当我的区域重新加载时我看不到select2相关的内容，当我检查它们时它们在DOM中。我使用 Select2版本4.0.2
$("#add_meal_item").on('click', '#save_meal_item', function () {
var meal_name = $("#add_meal_item_form").find('#meal_name').val();
var meal_type = $("#add_meal_item_form").find('#meal_type').val();
var logoImg = $("#add_meal_item_form").find('#meal_image').get(0).files[0];
var formData = new FormData();
formData.append('meal_image', logoImg);
formData.append('meal_type', meal_type);
formData.append('meal_name', meal_name);
formData.append('_token', "{{ csrf_token() }}");
console.log(formData);
var ajax_url = baseurl + '/save_meal_item';
$.ajax({
type: "POST",
url: ajax_url,
data: formData,
contentType: false,
processData: false,
cache: false,
success: function (response) {
$("#add_meal_item").modal('hide');
$("#form_meal_body").html(response);
ShowSvgImage();
}
});
});
以下是我在ajax响应后生成的HTML
<div class="modal fade in" id="add-modal-rota-user" style="display: block;">
<div class="modal-dialog routaPop" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Add Meal</h4>
</div>
<div class="modal-body inBodyForm" id="form_meal_body"><form action="" method="post" inbodyform="" form-horizontal="" id="add_assigin_meal">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Select Main Meal: *</label>
<input type="hidden" name="meal_item_id" value="">
<input type="hidden" name="meal_id" id="meal_id" value="">
<div class="select">
<select id="main_meal" class="select2 select2-hidden-accessible" name="meal_item[]" multiple="">
<option value="">Select Meal</option>
<option value="1">boiled egg</option>
<option value="2">bread</option>
<option value="13">AAA</option>
<option value="14">123</option>
<option value="15">test123</option>
<option value="16">2231111</option>
<option value="17">ggggg</option>
<option value="18">kkkkkkkkkk</option>
<option value="19">test meal</option>
<option value="20">hello world</option>
<option value="21">ASDASDASD33333</option>
<option value="other">Other</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px" class="svg replaced-svg">
<g>
<path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z" fill="#999999"></path>
</g>
</svg>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Select Drinks: *</label>
<input type="hidden" name="meal_item_id" value="">
<input type="hidden" name="meal_id" id="meal_id" value="">
<div class="select">
<select id="drinks" class="select2 select2-hidden-accessible" name="meal_item[]" multiple="">
<option value="">Select Meal</option>
<option value="3">tea</option>
<option value="5">ASDASDASD</option>
<option value="other">Other</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px" class="svg replaced-svg">
<g>
<path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z" fill="#999999"></path>
</g>
</svg>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Select Deserts: *</label>
<input type="hidden" name="meal_item_id" value="">
<input type="hidden" name="meal_id" id="meal_id" value="">
<div class="select">
<select id="desserts" class="select2 select2-hidden-accessible" name="meal_item[]" multiple="">
<option value="">Select Meal</option>
<option value="4">cake</option>
<option value="other">Other</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px" class="svg replaced-svg">
<g>
<path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z" fill="#999999"></path>
</g>
</svg>
</div>
</div>
</div>
<div id="new_food_item_section" hidden="hidden">
<div class="col-md-4">
<div class="form-group">
<label>Add New Meal Item: *</label>
<div class="">
<input type="text" name="meal_name" id="meal_name">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="form-group">
<label>Upload Meal Item Image: *</label>
<div class="file">
Upload
<input type="file" name="meal_image" id="meal_image" class="hidden">
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="_token" value="iEfVgn5kv4ifAQmNrwOHA117nFqCHLyCIJVihmf4">
<div class="hidden_form hidden"></div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" href="" type="button" id="cancel_modal">Cancel
</button>
<button type="button" id="saveform" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我希望这可以帮助其他人，因为我没有使用Select2自己的ajax，而且大多数答案都提到了它。对此最简单的答案是重新初始化选择2并且它为我节省了很多痛苦，可能不是最佳解决方案，但它对我有效。
这是我从上面提到的改变的成功方法。
success: function (response) {
$("#add_meal_item").modal('hide');
$("#form_meal_body").html(response);
$(".select2").select2();
$(".select2_multi").select2({closeOnSelect: false});
ShowSvgImage();
}