Change Selected option in Select2 Dropdown with jQuery

Last updated on by

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

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

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

But this does not directly work 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

Demo   Download

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 href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></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 the 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

View Demo

5. Conclusion

Pass value in the val() to set the 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.

14 thoughts on “Change Selected option in Select2 Dropdown with jQuery”

  3. — Select User–
    Yogesh Singh
    Sonarika Bhadoria
    Anil Singh
    Akilesh Sahu


    Set selected:

    — Select User–
    List1
    List2
    List3
    List4

    $(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’);

    });
    });

    this code not working..

    Reply

  5. Hi Yogesh! Thanks for your explanation!
    But if, in a edit page, I use autocomplete Ajax select2 option and I would to select the previous data that I don’t have in the select option as you mentioned, what I need to do?

    I would to keep the autocomplete Ajax option and add the possibility to see the data saved in the DB into the same select.

    Thanks 🙂

    Reply

Leave a Comment

© 2016-2025 Makitweb, All rights reserved