如何基于ID自定义jQuery UI Selectmenu下拉选择组件？

嘿，我来帮你把这个Selectmenu的自定义搞定！你已经有了不错的基础，咱们一步步完善它，让它完全基于#number这个ID实现你想要的效果：

1. 先补全代码里的缺失部分 #

你目前的代码缺少jQuery UI的依赖引入，而且<select>标签没闭合，先把这些基础项补上，不然组件没法正常工作：

<!-- 引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入jQuery UI的样式和核心脚本 -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<fieldset>
  <label for="number">Select a number</label>
  <select name="number" id="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <!-- 可按需添加更多选项 -->
    <option value="10">10</option>
  </select>
</fieldset>

2. 基于#number的核心自定义操作 #

你已经用$("#number")完成了初始化，接下来可以从样式定制和交互行为两个维度做精准修改：

样式自定义（精准定位#number关联的组件元素） #

jQuery UI的Selectmenu会生成额外的DOM元素，我们可以通过ID关联这些元素来修改样式：

/* 保留你原有的基础样式 */
fieldset { border: 0; }
label { display: block; margin: 30px 0 0 0; }
.overflow { height: 200px; overflow-y: auto; }

/* 定制#number对应的下拉按钮样式 */
#number-button {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 14px;
}

/* 按钮悬停效果 */
#number-button:hover {
  background: #e8e8e8;
}

/* 定制#number的下拉菜单项（在你原有粗体基础上扩展） */
#number-menu .ui-menu-item {
  font-weight: bold;
  padding: 7px 14px;
  color: #2d2d2d;
}

/* 菜单项悬停高亮 */
#number-menu .ui-menu-item:hover {
  background: #2196f3;
  color: white;
}

交互行为自定义（给#number添加个性化逻辑） #

你可以在初始化时加入配置项，或者绑定事件实现自定义交互：

$(function() {
  // 初始化Selectmenu并添加自定义配置
  $("#number").selectmenu({
    // 自定义下拉按钮显示的文本格式
    format: function(text) {
      return `当前选择: ${text}`;
    },
    // 选中选项时触发的事件
    change: function(event, ui) {
      console.log(`选中值: ${ui.item.value}, 文本: ${ui.item.label}`);
      // 这里可以添加你的业务逻辑，比如更新页面其他元素
      alert(`你选了数字 ${ui.item.value}`);
    },
    // 下拉菜单打开时的回调
    open: function() {
      console.log("下拉菜单已展开");
    }
  })
  // 保留你原来的滚动样式设置
  .selectmenu("menuWidget")
  .addClass("overflow")
  // 给生成的下拉菜单添加ID，方便样式精准控制
  .attr("id", "number-menu");
});

3. 实用自定义小技巧 #

• 强制修改下拉菜单宽度：默认宽度和按钮一致，可手动设置：

  #number-menu {
    width: 220px !important;
  }
  

• 禁用特定选项：直接在HTML的<option>里加disabled属性，jQuery UI会自动处理样式：

  <option value="5" disabled>5（不可选）</option>
  

• 设置默认选中项：给目标<option>加selected属性：

  <option value="3" selected>3</option>
  

这样你就可以完全基于#number这个ID，把Selectmenu组件定制成你想要的样子啦！

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