2016-08-31 11 views
0

私はJqueryのUIの選択メニューで変更したドロップダウンを持っています。 jqueryを使用して値を変更する必要があります。Jquery selectmenuドロップダウンの値を変更します

これを試してみました。

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

ドロップダウン値は変更されますが、それに関連付けられた変更機能が呼び出されません。

値が手動で変更されたときに警告が表示されますが、jquery selectメニューの値を更新するだけで、変更機能を呼び出さない場合は警告が表示されます。 どうすればいいか教えてください。

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

これを試してみてください。

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

 
$('#number').val(4).selectmenu('refresh').trigger('selectmenuchange');
<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>

+0

魔法のように動作します!ありがとう.. :) – Jayababu

関連する問題