Search code examples
javascriptjqueryonchangejquery-ui-selectmenu

Jquery selectmenu change the dropdown value

I have a dropdown which i changed with Jquery UI select menu. I have to change the value using jquery.

I have tried this and its working.

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

Its changing the dropdown value but its not calling the change function associated with It.

Please go through the code snippet attached, am triggering an alert when the value changed manually , but if i change through the jquery its just updating the value in jquery select menu , but its not calling the change function. Please guide me how to do.

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

)

Solution

  • Try this.

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