Невозможно динамически добавлять параметры при выборе ввода - PullRequest
0 голосов
/ 24 января 2020

Я получаю параметры элемента ввода через 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>

Вот что происходит с моим элементом ввода, когда Я добавляю опции через класс enter image description here

У меня есть несколько элементов, к которым я хочу добавить опции, поэтому я использую селектор класса

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>

Удаление выбора выбора не имеет никакого эффекта , Все еще сталкиваюсь с проблемой.

...