Remote activation of selectmenu jQuery UI

There is an element stylized thanks to selectmenu, there is also a button in a different place on the page (but within view of the screen relative to selectmenu, if this is important) So, when you click on this button, selectmenu should open. How to implement it?

P. S: I searched for an answer on the Internet for a long time, thinking that there is a function similar to. click () in jQuery that activates the callback of a click on an element, but I found nothing(
P. S. S: In general, if there is no such function in the jQuery UI, then tell me please as possible to implement my idea, thank you!
Author: Cat_In_Ears, 2019-07-08
Source

2 answers

If I understand correctly, you need to be able to select some values in <select> (even if custom), not only through its list, but also by buttons that will be located somewhere on the same page?

If so, as @InDevX{[17 said]}

You can simulate this with .click(), but with the standard <select>, you should not forget about the selected attribute.

I will write a small script that will select certain values in a certain selector using data attributes:

$('[data-select]').on('click', function(){
  let select = $(this).data('select'),
      index = $(this).data('index');
  
  if(select && index)
    $('#'+select+' option').eq(index).click().prop('selected', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectOne">
  <option selected>Ваш пол</option>
  <option>Мужской</option>
  <option>Женский</option>
</select>

<select id="selectTwo">
  <option selected>Ваш возраст</option>
  <option>&lt;18</option>
  <option>18-40</option>
  <option>&gt;40</option>
</select>
<br><br>
<input type="button" value="Я мужчина" data-select="selectOne" data-index="1">
<input type="button" value="Я женщина" data-select="selectOne" data-index="2">
<br>
<input type="button" value="Мне 22" data-select="selectTwo" data-index="2">
<input type="button" value="Мне 47" data-select="selectTwo" data-index="3">

P. s. data-select searches for the <select> element by id,
data-index searches it for the element <option> by index (from 0).

All this can be rewritten under any "input identifiers".

Using the method .selectmenu('open') you can control the opening of the list

$('#myselect').selectmenu('open');

An example implemented using the same functionality as above: 

$("#CustomSelector")
  .selectmenu()
  .selectmenu("menuWidget")
  .addClass("overflow");
 
$('[data-select]').on('click', function(e){
  let id = $(this).data('select');
  $('#'+id).selectmenu('open');
});
<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="button" value="Открыть" data-select="CustomSelector">
<br><br>

<select name="number" id="CustomSelector">
  <option>1</option>
  <option selected="selected">2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
</select>
 1
Author: CbIPoK2513, 2019-07-09 05:40:51

P. S: I searched for an answer on the Internet for a long time, thinking that there is a function similar to. click () in jQuery, which activates the callback of a click on an element, but I found nothing(

$('#two').hide().click(function(){
    alert('click');
});
$('#one').click(function(){
   $('#two').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="one">clickMe</button>
<button id="two">Hidden button with click alert</button>
click() simulates pressing the e-t in this case
 1
Author: InDevX, 2019-07-08 15:56:18