EasyAdmin中JavaScript触发Selectbox点击事件不生效问题

基于EasyAdmin进行后台开发时，通过JavaScript触发Selectbox下拉框点击操作无法生效，执行以下代码后无法实现预期的下拉选项选中效果：

$("#Tariff_customer_type-ts-control").click(); 
$("#Tariff_customer_type-opt-2").click();

对应效果截图：

EasyAdmin的下拉选择框默认基于Tom Select组件渲染，并非原生select控件。组件自身的事件监听、状态管理都是独立封装的，直接调用动态生成DOM的click()方法，无法被组件内部逻辑识别，自然不会触发选中效果。

方案1：调用Tom Select官方API（推荐，稳定性最高） #

Tom Select会在原生select元素上挂载实例对象，直接调用实例提供的setValue方法即可完成选中，不需要操作动态生成的DOM元素：

// 注意选择器为原生select元素的ID，不要选带-ts-control后缀的动态生成节点
const tsInstance = document.querySelector('#Tariff_customer_type').tomselect;
// 传入需要选中的选项对应value值，示例中opt-2对应的value为2，按实际业务值替换即可
tsInstance.setValue(2);

// 如果需要手动控制下拉展开/收起，可以调用以下方法
// tsInstance.open(); // 展开下拉
// tsInstance.close(); // 收起下拉

方案2：模拟组件监听的鼠标事件（不推荐，兼容性差） #

如果必须用事件模拟的方式实现，需要注意Tom Select默认监听的是mousedown、mouseup事件，而非原生click事件，同时要等下拉选项渲染完成后再触发对应选项的事件：

const controlNode = document.querySelector('#Tariff_customer_type-ts-control');
// 触发下拉展开
controlNode.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));

setTimeout(() => {
  const targetOption = document.querySelector('#Tariff_customer_type-opt-2');
  // 按组件监听逻辑派发事件触发选中
  targetOption.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
  targetOption.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
}, 100);

• 带-ts-control、-opt-*后缀的节点都是组件动态生成的，DOM结构可能随组件版本变化，不要强依赖这类选择器写业务逻辑
• 直接调用组件实例API的方式不受DOM结构变动影响，是官方推荐的交互方式

内容的提问来源于stack exchange，提问作者Bilal İnal