Jquery 无法在输入选择中动态附加选项

我通过ajax获取输入元素选项，并将它们附加到Select元素中。当我使用elementid来追加选项时，它们被正确地追加了，但是当我试图通过类来实现相同的目标时，select元素被选项替换了

我不明白为什么通过id和class附加选项之间存在差异，而它们是同一元素的属性

这是我的代码

函数getAllSubLob（lob_id，元素）
{
$.ajax({
url:“{route（'getAllSubLob'）}}”，
键入：“get”，
数据类型：“json”，
数据：{
“lob_id”：lob_id，
},
成功：功能（响应）{
$（element）.val（'default'）。selectpicker（'deselectAll'）；
$（元素）.html（响应）；
$（元素）。选择器（'刷新'）；
}
});
}

当我通过类添加选项时，输入元素会发生这种情况

我有多个元素，我想附加选项，这就是为什么我使用类选择器

通过Id附加选项时的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>

CSG
CP\U D
服务器
网络
存储
盐酸
CSG

CSG
CP\U D
服务器
网络
储藏
盐酸

通过类附加选项时的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>

CSG
CP\U D
服务器
网络
存储
盐酸

---

删除选择选择器无效。仍然面临问题。

您能包括所有相关代码吗？例如什么是

element

当它起作用时，什么是不起作用时，以及

element

所指的HTML是什么（当它起作用/不起作用时）。如果没有第三方selectpicker，它是否工作/不工作？您还可以提供您正在使用的“selectpicker”的详细信息吗？我已经更新了问题，您在js控制台中看到了什么？这个语法正确吗？“{route（'getAllSubLob'）}}”？控制台中没有错误。

<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>