Я получаю параметры элемента ввода через ajax и добавляю их в элемент Select. Когда я использую элемент Id для добавления параметров, они добавляются правильно, но когда я пытаюсь достичь того же самого через класс, элемент select заменяется параметрами.
Я не понимаю, почему существует разница между добавление опций через id и class, когда они являются атрибутом одного и того же элемента.
Вот мой код
<script>
function getAllSubLob(lob_id, element)
{
$.ajax({
url:'{{route('getAllSubLob')}}',
type: 'get',
dataType: 'json',
data: {
'lob_id' : lob_id,
},
success: function (response) {
$(element).val('default').selectpicker('deselectAll');
$(element).html(response);
$(element).selectpicker('refresh');
}
});
}
</script>
Вот что происходит с моим элементом ввода, когда Я добавляю опции через класс
У меня есть несколько элементов, к которым я хочу добавить опции, поэтому я использую селектор класса
HTML Код, когда опция добавлена через идентификатор
<td>
<div class="dropdown bootstrap-select select-lob form-control form-control-sm">
<select id="abcd" class="select-lob form-control form-control-sm selectpicker" tabindex="-98">
<option value="1">CSG</option>
<option value="2">CP_D</option>
<option value="3">Server</option>
<option value="4">Network</option>
<option value="5">Storage</option>
<option value="6">HCI</option>
</select>
<button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" data-id="abcd" title="CSG">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">CSG</div>
</div>
</div>
</button>
<div class="dropdown-menu " role="combobox" style="max-height: 330px; overflow: hidden; min-height: 116px;">
<div class="inner show" role="listbox" aria-expanded="false" tabindex="-1" style="max-height: 312px; overflow-y: auto; min-height: 98px;">
<ul class="dropdown-menu inner show">
<li class="selected active"><a role="option" class="dropdown-item selected active" aria-disabled="false" tabindex="0" aria-selected="true"><span class="text">CSG</span></a></li>
<li><a role="option" class="dropdown-item" aria-disabled="false" tabindex="0" aria-selected="false"><span class="text">CP_D</span></a></li>
<li><a role="option" class="dropdown-item" aria-disabled="false" tabindex="0" aria-selected="false"><span class="text">Server</span></a></li>
<li><a role="option" class="dropdown-item" aria-disabled="false" tabindex="0" aria-selected="false"><span class="text">Network</span></a></li>
<li><a role="option" class="dropdown-item" aria-disabled="false" tabindex="0" aria-selected="false"><span class="text">Storage</span></a></li>
<li><a role="option" class="dropdown-item" aria-disabled="false" tabindex="0" aria-selected="false"><span class="text">HCI</span></a></li>
</ul>
</div>
</div>
</div>
</td>
HTML Код, когда опция добавлена через класс
<td>
<div class="dropdown bootstrap-select select-lob form-control form-control-sm">
<option value="1">CSG</option>
<option value="2">CP_D</option>
<option value="3">Server</option>
<option value="4">Network</option>
<option value="5">Storage</option>
<option value="6">HCI</option>
</div>
</td>
Удаление выбора выбора не имеет никакого эффекта , Все еще сталкиваюсь с проблемой.