jquery-select2 - w3toppers.com

How to Set Selected value in Multi-Value Select in Jquery-Select2.?

Well actually your only need $.each to get all values, it will help you jsfiddle.net/NdQbw/5 <div class=”divright”> <select id=”drp_Books_Ill_Illustrations” class=”leaderMultiSelctdropdown Books_Illustrations” name=”drp_Books_Ill_Illustrations” multiple=””> <option value=” “>No illustrations</option> <option value=”a” selected>Illustrations</option> <option value=”b”>Maps</option> <option value=”c” selected>selectedPortraits</option> </select> </div> <div class=”divright”> <select id=”drp_Books_Ill_Illustrations1″ class=” Books_Illustrations” name=”drp_Books_Ill_Illustrations” multiple=””> <option value=” “>No illustrations</option> <option value=”a”>Illustrations</option> <option value=”b”>Maps</option> <option value=”c”>selectedPortraits</option> … Read more

Dynamically add item to jQuery Select2 control that uses AJAX

This is a lot easier to do starting in select2 v4. You can create a new Option, and append it to the select element directly. See my codepen or the example below: $(document).ready(function() { $(“#state”).select2({ tags: true }); $(“#btn-add-state”).on(“click”, function(){ var newStateVal = $(“#new-state”).val(); // Set the value, creating a new option if necessary if … Read more

Selectable optgroup using select2

This is possible if you back the Select2 with a hidden input element — instead of a select element. To make a group option selectable, you must give it an “id”, but it appears it can be an empty string. You can then use the “select2-selecting” event to prevent the group option from getting selected, … Read more

Select2 v4 how to paginate results using AJAX

Select2 supports pagination when using remote data through the pagination key that comes out of processResults. For infinite scrolling, the pagination object is expected to have a more property which is a boolean (true or false). This will tell Select2 whether it should load more results when reaching the bottom, or if it has reached … Read more

Select2: How to prevent tags sorting

I’ve found a solution that works with Select2 v4. It changes the order of items – item selected by user are moved to the end. $(“select”).select2(); $(“select”).on(“select2:select”, function (evt) { var element = evt.params.data.element; var $element = $(element); $element.detach(); $(this).append($element); $(this).trigger(“change”); }); <link href=”https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css” rel=”stylesheet”/> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js”></script> <select style=”width: 500px;” multiple=”multiple”> <option>two</option> <option>four</option> … Read more

Select2: Hide certain options dynamically

Would adding the following CSS Rule to the page solve your problem? .select2-container–default .select2-results__option[aria-disabled=true] { display: none; } Basically it would hide a disable option instead of displaying it with a gray background. Use disabled instead of display:’none’ in your options list also. JS Bin

How to use placeholder as default value in select2 framework

You have to add an empty option (i.e. <option></option>) as a first element to see a placeholder. From Select2 official documentation : “Note that because browsers assume the first option element is selected in non-multi-value select boxes an empty first option element must be provided (<option></option>) for the placeholder to work.” Example: <select id=”countries”> <option></option> … Read more

Get Selected value from Multi-Value Select Boxes by jquery-select2?

alert(“Selected value is: “+$(“.leaderMultiSelctdropdown”).select2(“val”)); alternatively, if you used a regular selectbox as base, you should be able to use the normal jquery call, too: alert(“Selected value is: “+$(“.leaderMultiSelctdropdown”).val()); both return an array of the selected keys.

select2 changing items dynamically

I’ve made an example for you showing how this could be done. Notice the js but also that I changed #value into an input element <input id=”value” type=”hidden” style=”width:300px”/> and that I am triggering the change event for getting the initial values $(‘#attribute’).select2().on(‘change’, function() { $(‘#value’).select2({data:data[$(this).val()]}); }).trigger(‘change’); Code Example Edit: In the current version of … Read more

Select2() is not a function

I was having this problem when I started using select2 with XCrud. I solved it by disabling XCrud from loading JQuery, it was it a second time, and loading it below the body tag. So make sure JQuery isn’t getting loaded twice on your page.