页面加载后如何将动态选项传入dselect函数实现搜索功能

问题核心是dselect初始化时仅识别当前select的选项，动态加载新选项后需要重新初始化，具体修改如下：

1. 封装dselect初始化函数 #

把初始化逻辑封装成可复用的函数，方便动态更新后调用，同时处理旧实例的销毁避免冲突：

function initDselect() {
  // 销毁已存在的dselect实例（如果有）
  const selectEl = document.querySelector('.select_box');
  if (selectEl.dselect) {
    selectEl.dselect.destroy();
  }
  // 重新初始化带搜索功能的dselect
  dselect(selectEl, {
    search: true
  });
}

2. 修改Ajax回调与页面初始化逻辑 #

在页面加载时先初始化一次（适配初始提示选项），并在Ajax完成更新选项后重新调用初始化函数：

$(document).ready(function(){
  // 页面加载完成后初始化初始状态的select
  initDselect();

  $("select.entity").change(function(){
      var selectedEntity = $(".entity option:selected").val();
      $.ajax({
          type: "POST",
          url: "entityName.php",
          data: { entity : selectedEntity } 
      }).done(function(data){
          $("#entityName").html(data);
          // 动态加载选项后重新初始化dselect，让搜索功能适配新选项
          initDselect();
      });
  });
});

原理说明 #

dselect会基于初始化时的select DOM结构生成带搜索的UI组件，动态替换选项后原组件无法感知新内容，因此必须重新初始化：

• 销毁旧实例是为了避免重复生成DOM元素或功能冲突
• 重新初始化时，dselect会读取当前select的所有新选项，生成对应的搜索下拉UI

内容的提问来源于stack exchange，提问作者Tanvir