如何统一封装jQuery UI Selectmenu代码适配新增下拉菜单？

我完全懂你这种重复写相似代码的痛苦——每次新增一个下拉菜单，都要复制粘贴变量定义、Selectmenu初始化、按钮事件绑定、mouseup事件绑定那一套，代码越堆越臃肿，维护起来也麻烦。下面给你一套通用的封装方案，以后新增字段直接复用，再也不用重复写逻辑了！

核心思路 #

把所有重复的初始化、事件绑定逻辑抽成一个可复用的函数，通过选择器批量处理现有组件，同时支持动态新增组件的单独初始化，还能预留个性化配置的空间。

具体实现代码 #

1. 封装通用初始化函数 #

这个函数会遍历目标选择器对应的所有元素，统一完成Selectmenu初始化、关联按钮事件、mouseup事件绑定：

// 封装通用的jQuery UI Selectmenu初始化逻辑
function initSelectmenu(selector) {
  $(selector).each(function() {
    const $select = $(this);
    
    // 1. 初始化Selectmenu（可配置通用参数）
    $select.selectmenu({
      width: 200, // 默认宽度，可通过data属性覆盖
      change: function(event, ui) {
        // 通用的change事件逻辑，比如打印选中值
        console.log(`选中选项: ${ui.item.value} - ${ui.item.text}`);
      }
    });

    // 2. 绑定关联按钮事件（假设按钮通过data-target关联对应的select ID）
    const targetId = $select.attr('id');
    const $triggerBtn = $(`button[data-target="#${targetId}"]`);
    if ($triggerBtn.length) {
      $triggerBtn.on('click', function() {
        // 按钮点击时打开下拉菜单
        $select.selectmenu('open');
      });
    }

    // 3. 绑定mouseup事件
    $select.on('mouseup', function() {
      // 通用的mouseup逻辑，比如做一些状态重置
      console.log(`下拉菜单#${targetId}触发mouseup事件`);
    });
  });
}

2. 初始化现有组件 #

页面加载完成后，直接调用函数初始化所有带有指定类的Selectmenu：

$(document).ready(function() {
  // 初始化所有带有.selectmenu-custom类的下拉菜单
  initSelectmenu('.selectmenu-custom');
});

3. 动态新增组件的初始化 #

如果后续通过JS动态新增了下拉菜单，只需要调用函数传入新增元素的选择器即可：

// 示例：动态创建一个新的select
const newSelect = `<select id="new-select" class="selectmenu-custom">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>`;
$('#container').append(newSelect);

// 初始化这个新的下拉菜单
initSelectmenu('#new-select');

进阶优化：支持个性化配置 #

如果某些下拉菜单需要特殊配置（比如不同的宽度、自定义事件逻辑），可以通过HTML的data-*属性传递，然后在封装函数中读取：

HTML结构示例 #

<select id="special-select" class="selectmenu-custom" 
        data-width="300" 
        data-custom-change="handleSpecialChange">
  <option value="a">特殊选项A</option>
  <option value="b">特殊选项B</option>
</select>
<button data-target="#special-select">打开特殊下拉</button>

修改后的封装函数 #

function initSelectmenu(selector) {
  $(selector).each(function() {
    const $select = $(this);
    // 读取data属性中的个性化配置
    const customWidth = $select.data('width') || 200;
    const customChangeHandler = window[$select.data('custom-change')];

    $select.selectmenu({
      width: customWidth,
      change: function(event, ui) {
        // 先执行通用逻辑
        console.log(`选中选项: ${ui.item.value} - ${ui.item.text}`);
        // 如果有自定义处理函数，执行它
        if (typeof customChangeHandler === 'function') {
          customChangeHandler.call(this, event, ui);
        }
      }
    });

    // 按钮事件、mouseup事件逻辑不变...
  });
}

// 自定义的特殊change处理函数
function handleSpecialChange(event, ui) {
  alert(`特殊下拉菜单选中了: ${ui.item.text}`);
}

这样既保证了代码的复用性，又能灵活应对不同组件的个性化需求，以后新增下拉菜单只需要添加对应的类或者调用初始化函数，再也不用复制粘贴重复代码了！

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