TomSelect依赖下拉框重复Ajax加载后刷新选项报错求助

问题根源 #

你之前的实现每次触发From下拉框选择后，都会通过PHP返回初始化To下拉框TomSelect的代码，第二次执行时To元素已经绑定过TomSelect实例，所以抛出Uncaught Error: Tom Select already initialized on this element错误。

正确实现思路 #

只初始化一次To下拉框的TomSelect实例，后续通过TomSelect提供的refreshOptions方法更新选项，而非重复初始化。

步骤1：HTML结构 #

保留两个原生<select>元素：

<select id="from-select" name="from">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

<select id="to-select" name="to">
  <option value="">请先选择From</option>
</select>

步骤2：前端JS逻辑 #

页面加载时同时初始化两个下拉框的TomSelect实例，监听From的选择变化，通过Ajax获取选项后用refreshOptions更新To的内容：

// 初始化From下拉框
const fromSelect = new TomSelect('#from-select', {
  placeholder: '选择From'
});

// 初始化To下拉框并保存实例，后续复用
const toSelect = new TomSelect('#to-select', {
  placeholder: '选择To'
});

// 监听From选择事件
fromSelect.on('change', function(selectedValue) {
  // 处理From选空的情况
  if (!selectedValue) {
    toSelect.clear();
    toSelect.refreshOptions({
      options: [{value: '', text: '请先选择From'}],
      reset: true
    });
    return;
  }

  // 发起Ajax请求获取To选项
  fetch(`your-php-api.php?from=${encodeURIComponent(selectedValue)}`)
    .then(res => res.json())
    .then(optionsData => {
      // 转换为TomSelect需要的选项格式（value/text键值对）
      const formattedOptions = optionsData.map(item => ({
        value: item.value,
        text: item.text
      }));

      // 无选项时添加提示
      if (formattedOptions.length === 0) {
        formattedOptions.push({value: '', text: '无可用选项'});
      }

      // 更新To下拉框选项
      toSelect.clear();
      toSelect.refreshOptions({
        options: formattedOptions,
        reset: true // 重置选中状态
      });
    })
    .catch(err => {
      console.error('加载To选项失败:', err);
      toSelect.refreshOptions({
        options: [{value: '', text: '加载失败，请重试'}],
        reset: true
      });
    });
});

步骤3：调整PHP接口 #

移除PHP中初始化TomSelect的代码，仅返回JSON格式的选项数据：

<?php
$fromValue = $_GET['from'] ?? '';
$options = [];

// 根据From的值查询对应To选项（示例逻辑，替换为你的业务查询）
if ($fromValue === '1') {
  $options = [
    ['value' => 'a', 'text' => 'To选项A'],
    ['value' => 'b', 'text' => 'To选项B']
  ];
} elseif ($fromValue === '2') {
  $options = [
    ['value' => 'c', 'text' => 'To选项C'],
    ['value' => 'd', 'text' => 'To选项D']
  ];
}

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($options);
?>

关键注意事项 #

• 必须保存To下拉框的TomSelect实例，避免重复初始化
• Ajax返回的数据需包含value和text字段，匹配TomSelect的选项格式
• 处理空选择、请求失败等边界情况，提升用户体验

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