如何在mouseup事件中获取jQuery UI Selectmenu选中项的值？

这个问题的核心是你把mouseup事件绑定错了目标元素——你绑定在了触发按钮上，但实际上你需要监听的是下拉菜单里的选项元素，而且这些选项是jQuery UI动态生成的，所以得用事件委托来处理。

问题分析 #

你之前绑定在#speed-button上的mouseup事件，只会在鼠标松开在按钮本身上时触发，这时候选中的还是原来的默认值。而下拉菜单的选项是jQuery UI在初始化selectmenu时动态创建的DOM元素，不在初始的HTML结构里，直接绑定事件是无效的，必须用事件委托来监听这些动态元素。

解决方案 #

我们需要做以下调整：

1. 移除按钮上的mouseup事件绑定，因为它不是我们要监听的目标。
2. 使用事件委托，监听文档（或更接近的父容器）上的mouseup事件，委托给下拉菜单的选项元素。
3. 在事件处理函数中，通过jQuery UI提供的API获取对应选项的信息，甚至可以自动选中该选项。

完整代码示例 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    fieldset { border: 0; }
    label { display: block; margin: 30px 0 0 0; }
    .overflow { height: 200px; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    // 初始化selectmenu
    $( "#speed" ).selectmenu();

    // mousedown打开下拉菜单
    $("#speed-button").on("mousedown", function() { 
      $("#speed").selectmenu("open"); 
    });

    // 事件委托监听下拉选项的mouseup事件
    $(document).on('mouseup', '.ui-selectmenu-menu .ui-menu-item', function() {
      // 获取对应的原生option元素
      const option = $(this).data('ui-selectmenu-item');
      // 获取选项文本和值
      const optionText = $(option).text();
      const optionValue = $(option).val();

      // 自动选中该选项（可选，如果你希望松开鼠标后选中该选项）
      $("#speed").selectmenu('select', option);

      // 测试输出
      alert(`选中的选项：${optionText}，值：${optionValue}`);
    });
  } );
  </script>
</head>
<body>
<div class="demo">
  <form action="#">
    <fieldset>
      <select name="speed" id="speed">
        <option selected="selected" value="1">1 vuxen</option>
        <option value="2">2 vuxna</option>
        <option value="3">3 vuxna</option>
        <option value="4">4 vuxna</option>
        <option value="5">5 vuxna</option>
        <option value="6">6 vuxna</option>
        <option value="7">7 vuxna</option>
        <option value="8">8 vuxna</option>
        <option value="9">9 vuxna</option>
      </select>
    </fieldset>
  </form>
</div>
</body>
</html>

关键说明 #

• $(document).on('mouseup', '.ui-selectmenu-menu .ui-menu-item', ...)：事件委托确保动态生成的选项也能触发事件。
• $(this).data('ui-selectmenu-item')：jQuery UI会给每个下拉菜单的选项元素绑定对应的原生option元素，通过这个data属性可以直接获取。
• $("#speed").selectmenu('select', option)：如果希望松开鼠标后自动选中该选项，可以调用这个方法，否则选项不会自动选中（因为默认selectmenu的选中逻辑是基于click事件的）。

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