Пытаясь найти решение этой проблемы в Stackoverflow, я решил задать этот новый вопрос, поскольку я не видел подобных случаев.
В моем коде есть форма с несколькими селекторами select2. Допустим, что select2 # 1, select2 # 2, select2 # 3 и select2 # 4.
Как только пользователь выбрал опцию из select2 # 1 и select2 # 2, через Ajax я получаю данные для ввода в выберите 2 # 3. Я получаю данные, как я ожидаю, когда функция выполняется, и я могу вставить данные в select2 # 3, но содержимое родительского div исчезает после выполнения функции.
У меня есть перепробовал много вещей, но ни одна из них не сработала.
Это часть html для select2 # 3:
<div class="col-sm">
<label style="font-size: 20px;">THIS WILL DISAPPEAR AFTER CALLING THE FUNCTION</label>
<select id="SelectSection" class="chosen-select">
<option selected="selected" value="0"><fmt:message key="cap.todos"/></option>
<c:forEach items="${sectionList}" var="sectionList">
<option value="${sectionList.idLocation}"><c:out value="${sectionList.location}" />
</option>
</c:forEach>
</select>
</div>
И это часть jQuery / Ajax 1012 *
$('#SelectLine,#SelectWorkshop').on("change", function(e) {
if($('#SelectLine').select2("val") != '' & $('#SelectWorkshop').select2("val") != ''){
var params = { idWorkshop : $('#SelectWorkshop').select2("val"), idLine : $('#SelectLine').select2("val") };
bSelectSectionLoaded = false;
$.ajax({
type: "GET",
url: '${pageContext.request.contextPath}/Locations/LocationsController',
data: params,
success: function (data) {
$('#SelectSection').parent().empty().append(data);
$('#SelectSection').select2({width: '100%', placeholder: ''});
bSelectSectionLoaded = true;
},
error: function (ex) {
swal("Error" + ex.Message, "error");
}
});
}
});
Таким образом, в основном, после выполнения функции, данные будут загружены, но метка с надписью «ЭТО БУДЕТ ПРЕКРАТИТЬСЯ ПОСЛЕ ВЫЗОВА ФУНКЦИИ» исчезнет. Кто-нибудь знает почему и как это исправить? Спасибо.