Can you trigger a jQuery UI selectmenu to appear when clicking another element?

Question

I am using jQuery UI's selectmenu to style a <select> element on a page.

By default, it renders a <span> with class .ui-selectmenu-button which toggles the menu.

However, I would like to hide that and make the menu appear/disappear when clicking on a different element on the page.

How would I do this, please?

Note: the currently selected value of the menu does not need to be visible until the menu appears, so that is not a concern.

Answer 1

Consider the following example.

$(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>