主页 / 问题 / 1000682
Accepted
Cat_In_Ears
Asked:2020-07-08 23:38:51 +0800 CST2020-07-08 23:38:51 +0800 CST

jquery ui 选择菜单远程激活

  • 772

由于 有一个风格化的元素selectmenu，在页面的另一个位置也有一个按钮（但在相对于 的屏幕可见性中selectmenu，如果这很重要的话）所以，当你点击这个按钮时，selectmenu. 如何实施？

PS：在网上找了很久的答案，以为JQuery中有一个类似.click()的函数，可以激活一个元素的点击回调，但是没找到（
PSS：一般来说，如果JQuery UI中没有这个功能，那么请告诉我如何实现我的想法，谢谢！

jquery

2 个回答

  1. PS：在网上找了很久的答案，以为JQuery中有一个类似.click()的函数，可以激活一个元素的点击回调，但是没找到（

    $('#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()在这种情况下模拟点击 el-t

    • 1
  2. Best Answer

    如果我理解正确，您需要能够选择一些值<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">

    Ps 通过data-select搜索一个元素，通过索引（从 0 开始）在其中搜索一个元素。<select>id
    data-index<option>

    所有这些都可以为任何“输入标识符”重写。

    使用方法.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>

    • 1

相关问题