Change Selected option in Select2 Dropdown with jQuery

Select2 is a jQuery plugin which customizes HTML select element and makes it more user-friendly.

It adds search features, allows to add an image with options.

The HTML select element option can easily set selected using jQuery – $(selector).val(option-value);.

But this not directly works with the Select2 dropdown element.

In this tutorial, I show how you can dynamically set an option selected in Select2 with jQuery.

Change selected option in Select2 dropdown with jQuery


Contents

  1. Download & Include
  2. HTML
  3. Script
  4. Demo
  5. Conclusion

1. Download & Include

  • Download the Select2 plugin from here.
  • Include select2.min.css, select2.min.js, along with jQuery library at the <head>.
<!-- Select2 CSS -->
<link rel="stylesheet" type="text/css" href="select2/dist/css/select2.min.css">

<!-- jQuery -->
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

<!-- Select2 JS -->
<script src="select2/dist/js/select2.min.js" type="text/javascript"></script>

2. HTML

Create two <select > with similar options.

  • The first <select>¬† is used to initialize select2 plugin.
  • The second <select> is used to set an option selected on the first dropdown when option gets selected with jQuery. In this element doesn’t initialize select2.

Completed Code

<!-- Use to Initialize select2 -->
<select id='sel_users'>
   <option value=''>-- Select User--</option>
   <option value='yogesh'>Yogesh Singh</option>
   <option value='sonarika'>Sonarika Bhadoria</option>
   <option value='anil'>Anil Singh</option>
   <option value='akilesh'>Akilesh Sahu</option> 
</select>

<br><br>
<!-- Use to set an option selected in the First dropdown -->
Set selected: 
<select id='user_selected'>
   <option value=''>-- Select User--</option>
   <option value='yogesh'>Yogesh Singh</option>
   <option value='sonarika'>Sonarika Bhadoria</option>
   <option value='anil'>Anil Singh</option>
   <option value='akilesh'>Akilesh Sahu</option> 
</select>

3. Script

Initialize select2 on <select id='sel_users'>.

On option change from $('#user_selected') then get the selected value.

To set option selected in <select id='sel_users'> pass value in val(value) and to update the view need to call –

$('#sel_users').select2().trigger('change');

Completed Code

$(document).ready(function(){

  // Initialize Select2
  $('#sel_users').select2();

  // Set option selected onchange
  $('#user_selected').change(function(){
    var value = $(this).val();

    // Set selected 
    $('#sel_users').val(value);
    $('#sel_users').select2().trigger('change');

  });
});

4. Demo

Select option from the second dropdown to change a selected option in the first dropdown.


5. Conclusion

Pass value in the val() to set selected option with jQuery but also need to call select2().trigger('change') on the selector to update the view.

If you found this tutorial helpful then don't forget to share.

Related Post

Spread the love
  • 1
  •  
  •  
  •  
  • 1
  •  

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *