如何通过点击其他元素触发jQuery UI selectmenu下拉菜单显示

1. 隐藏默认触发按钮 #

通过CSS直接隐藏组件默认生成的触发按钮，避免和自定义触发逻辑冲突：

.ui-selectmenu-button {
  /* 加!important优先级避免被组件自带样式覆盖 */
  display: none !important;
}

2. 绑定自定义触发逻辑 #

jQuery UI selectmenu 原生提供了控制菜单显隐的公开方法，直接给自定义元素绑定点击事件调用对应方法即可：

• selectmenu("open")：强制展开下拉菜单
• selectmenu("close")：强制收起下拉菜单
• selectmenu("toggle")：自动切换菜单的展开/收起状态

示例代码（假设select元素ID为form-select，自定义触发元素ID为custom-trigger）：

// 首先正常初始化selectmenu组件
$("#form-select").selectmenu();

// 给自定义元素绑定点击事件
$("#custom-trigger").on("click", function () {
  // 按需调用对应方法即可，示例用toggle实现点击切换效果
  $("#form-select").selectmenu("toggle");
});

额外说明 #

组件默认的点击页面空白区域自动收起菜单逻辑依然生效，无需额外适配；你提到不需要展示选中值，该方案完全不需要调整原有选中值相关的组件配置。

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