Since modifying the source code is not an option and adding a hook to the select2:open event is not very elegant, especially when you have multiple select2 instances in the same page, I have written a small extension for the Select2 plugin. My implementation is inspired by a PR from the plugin’s repository (https://github.com/select2/select2/pull/4618) that … Read more
Select2 API v3.x (sortResults) You can sort elements using sortResults callback option with String.localeCompare(): $( ‘#mylist’ ).select2({ /* Sort data using localeCompare */ sortResults: data => data.sort((a, b) => a.text.localeCompare(b.text)), }); <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css” integrity=”sha256-ijlUKKj3hJCiiT2HWo1kqkI79NTEYpzOsw5Rs3k42dI=” crossorigin=”anonymous” /><script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js” integrity=”sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=” crossorigin=”anonymous”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js” integrity=”sha256-7A2MDY2eGSSUvgfbuH1IdzYk8qkEd3uzwiXADqPDdtY=” crossorigin=”anonymous”></script> <select name=”list” id=”mylist” style=”width:140px;”> <option>United States</option> <option>Austria</option> <option>Alabama</option> <option>Jamaica</option> <option>Taiwan</option> <option>canada</option> <option>palau</option> … Read more
Select2 will store all the information it uses on the original select element. You can access the following information by calling .data(‘select2’) on the original element: From there, you can access the $container property to identify the container in the DOM and add the class to that like this: var $select2 = $(‘select.select2′).select2() $select2.data().select2.$container.addClass(“wrap”) Here’s … Read more
you can use this $(“#e2 option:selected”).text();
The right way for Select2 3.x is: $(‘select’).select2(“enable”, false) This works fine.
You can use dropdownCssClass for adding class to the select2-drop. I read whole plugin to understand what is going on. Finally, I found that option. $(“.jSelectbox”).select2({ containerCssClass: “error”, dropdownCssClass: “test” }); Update: If it didn’t work, try this (way 2): $select = $(“.jSelectbox”).select2({}); $select.data(‘select2’).$container.addClass(‘error’); $select.data(‘select2’).$dropdown.addClass(‘test’); $(“.jSelectbox”).select2({ containerCssClass: “error”, dropdownCssClass: “test” }); <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <link href=”https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css” … Read more
What is happening: By default, results of the object you are returning in ajax.results should be an array in this structure [{id:1,text:”a”},{id:2,text:”b”}, …]. results: function (data, page) { var array = data.results; //depends on your JSON return { results: array }; } In Select2.js it actually states: * @param options.results a function(remoteData, pageNumber, query) that … Read more
Select2 used to provide a select2(‘search’, ‘term’) helper method that would have assisted with this, but it was not brought over to Select2 4.0.0. There are a couple of ways that this could be done, but in general they all follow the same pattern of steps Open the Select2 dropdown Enter the search text into … Read more
May be if (select.val() !== “” && select.val() !== null) { **el.className += ‘has-selection’;** } else { el.removeClass(‘has-selection’); }
Because Select2 lib prevent any click events on popover list you can’t bind events to .info directly. But you can redefine onSelect method and place there any code you want. See example: http://jsfiddle.net/f8q2by55/ Update for multiple selects: http://jsfiddle.net/6jaodjzq/