jquery ui select menu dynamically initialize the widget, dynamically create/load options and dynamically select a specific option in the dropdown

jquery ui select menu dynamically initialize the widget, dynamically create/load options and dynamically select a specific option in the dropdown

by Rahul Gupta

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
  	$('#initialize').click(function() {
    	$( "#speed" ).selectmenu();
      $('#status').html('The widget is now initialized. But it is still empty and does not contain any options.');
      $('#add_options').removeAttr('disabled');
      $('#initialize').attr('disabled','');
    });
    

		$('#add_options').click(function() {
    	// Add a new option to the dropdown
    	$('#speed').append($('<option>', {
          value: 1,
          text: 'Option 1'
      }));
      $('#speed').append($('<option>', {
          value: 2,
          text: 'Option 2'
      }));
      $('#speed').append($('<option>', {
          value: 3,
          text: 'Option 3'
      }));
      //Refresh the selectmenu widget so the newly added options to the dropdown are now loaded properly
      $( '#speed' ).selectmenu( "refresh" );
      
      $('#status').html('The new options are now added dynamically!!');
      $('#select_option').removeAttr('disabled');
      $('#add_options').attr('disabled','');
    });
    
   	$('#select_option').click(function() {
    	$( '#speed' ).val(3);
      $( '#speed' ).selectmenu( "refresh" );
      
      $('#status').html('Options 3 is now selected!!');
      $('#select_option').attr('disabled','');
    }); 
  });
  </script>
  
 <div class="demo">
 <input type="button" value="Initialize the Widget" id="initialize"/>
 <br><br>
 <input type="button" value="Dynamically Add New Options" id="add_options" disabled/>
 <br><br>
 <input type="button" value="Select the 'Option 3'" id="select_option" disabled/>
<form action="#">
  <br>
  <div id="status" style="font-weight:bold;">This is the simple default HTML dropdown</div>
  <br>
    <label...