Дистанционная активация selectmenu JQuery UI

138

26 марта 2021, 16:50

Есть элемент стилизованный благодаря selectmenu, также есть кнопка в другой месте страницы (но в пределах видимости экрана относительно selectmenu, если это важно) Так вот, при клике на эту кнопку должен раскрываться selectmenu. Как это реализовать? P.S: Долго искал ответ в интернете, думая, что есть функция на подобии .click() в JQuery, которая активирует колбэк клика по элементу, но ничего не нашел( P.S.S: Вообще если такой функции в JQuery UI нет, то подскажите пожалуйста как возможно реализовать мою задумку, спасибо!

Answer 1

Если я правильно понял, вам нужна возможно выбирать какие-то значения в <select> (пусть даже кастомном), не только через его список, но и по кнопкам, которые будут находиться где-то на этой же странице?

Если да, то как сказал @InDevX

Можно имитировать такое благодаря .click(), но а со стандартным <select> не стоит забывать и про атрибут selected.

Напишу небольшой скрипт, который будет выбирать в определённом селекторе определённые значения используя data атрибуты:

$('[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 ищет элемент <select> по id,
data-index ищет в нём элемент <option> по индексу (от 0).

Всё это можно переписать под любые "входные идентификаторы".

Использование метода .selectmenu('open') можно управлять открытием списка

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

Пример, реализованный по тому же функционалу, что и выше:

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

Answer 2

P.S: Долго искал ответ в интернете, думая, что есть функция на подобии .click() в JQuery, которая активирует колбэк клика по элементу, но ничего не нашел(

$('#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() имитирует нажание на эл-т в данном случае