单击另一个元素时，您可以触发 jQuery UI 选择菜单吗？

Posted 2023-05-08

【中文标题】单击另一个元素时，您可以触发 jQuery UI 选择菜单吗？

【英文标题】：Can you trigger a jQuery UI selectmenu to appear when clicking another element?

【发布时间】：2021-10-30 14:33:17

【问题描述】：

我正在使用 jQuery UI 的 selectmenu 在页面上设置 <select> 元素的样式。

默认情况下，它会渲染一个 <span> 类 .ui-selectmenu-button 来切换菜单。

但是，我想隐藏它并在单击页面上的其他元素时使菜单出现/消失。

请问我该怎么做？

注意：当前选择的菜单值确实不需要在菜单出现之前可见，所以这不是问题。

【问题讨论】：

你有没有尝试过？大概在单击您的元素时触发菜单的事件处理程序将是正确的方法，或者至少值得一试？这些事件处理程序都记录在您链接到的页面上......您尝试了什么？

为什么不用open 方法？查看更多：api.jqueryui.com/selectmenu/#method-open

【参考方案1】：

考虑以下示例。

$(function() 
  $("#speed").selectmenu();
  $(".next").click(function() 
    $(".select-option").show();
    $("#speed").selectmenu("open");
  );
);

label 
  display: block;


select 
  width: 200px;


.hidden 
  display: none;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="car-type ui-widget">
  <label for="car-name" class="ui-widget-header">Name your car:</label>
  <input type="text" name="car-name" id="car-name" class="ui-widget-content"><button class="next btn i-priority-primary">Next</button>
  <div class="select-option hidden">
    <label for="speed" class="ui-widget-header">Select a speed:</label>
    <select name="speed" id="speed">
      <option value="Slower">Slower</option>
      <option value="Slow">Slow</option>
      <option value="Medium" selected>Medium</option>
      <option value="Fast">Fast</option>
      <option value="Faster">Faster</option>
    </select>
  </div>
</div>