Jquery selectmenu更改下拉值

时间:2016-08-31 07:26:31

标签: javascript jquery onchange jquery-ui-selectmenu

我有一个下拉列表,我用Jquery UI选择菜单进行了更改。 我必须使用jquery更改值。

我已经尝试了这个及其工作。

$('#myId').val('someValue');
$('#myId').selectmenu('refresh');

它改变了下拉值,但没有调用与It相关的改变函数。

请仔细检查附加的代码片段,当手动更改值时触发警报,但如果我通过jquery更改它只是更新jquery选择菜单中的值,但它没有调用更改函数。 请指导我该怎么做。

$('#number').selectmenu({
change:function( event, ui ) {alert('Hello')}
});
$('#number').val('3');
$('#number').selectmenu('refresh');
<link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<html>
  <head>
  
  
  
  
  
  </head>
  <body>
   <select name="number" id="number">
      <option>1</option>
      <option selected="selected">2</option>
      <option value="3">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>
  
  
  
  </body>
  </html>

1 个答案:

答案 0 :(得分:2)

试试这个。

&#13;
&#13;
$('#number').selectmenu();
$('#number').on('selectmenuchange', function() {
    alert( 'Hello'); 
});

$('#number').val(4).selectmenu('refresh').trigger('selectmenuchange');
&#13;
<link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <html>
      <head>
      
      
      
      
      
      </head>
      <body>
       <select name="number" id="number">
          <option>1</option>
          <option selected="selected">2</option>
          <option value="3">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>
      
      
      
      </body>
      </html>
&#13;
&#13;
&#13;