$(“select”).val(”).change(); That is all 🙂 http://jsfiddle.net/6hZFU/78/ Explanation: when you change value of any input or select through JavaScript browser will not fire change event for that change (that is how specs say). When you fire change event select2 will catch up and reflect new value of select.
Working Code for v4.0+ *(including 4.0.7) The following code will open the menu on the initial focus, but won’t get stuck in an infinite loop when the selection re-focuses after the menu closes. // on first focus (bubbles up to document), open the menu $(document).on(‘focus’, ‘.select2-selection.select2-selection–single’, function (e) { $(this).closest(“.select2-container”).siblings(‘select:enabled’).select2(‘open’); }); // steal focus during … Read more
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
Just add ignore: [], in Your form validation function. It will enable hidden field validation.So You will get validation for Select 2 $(“#ContactForm”).validate({ ignore: [], rules: { //Rules }, messages: { //messages } });
Select 2 is smart enough to recalculate it’s size if only you set it in the select tag. Like so: <select style=”width: 100%”></select> CSS formatting on classes would not work! Read more in “Responsive design – Percent width”
you can check if the element has select2 attribute $(‘.MyDripdowns’).each(function (i, obj) { if (!$(obj).data(‘select2’)) { $(obj).select2({ width: “455px” }); } }); EDIT As @Fr0zenFyr said in his comment for v4.0 you can use : if (!$(obj).hasClass(“select2-hidden-accessible”))
Before you clone the row, you need to disable Select2 on the select element by calling its destroy method: destroy Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved. See http://ivaynberg.github.io/select2/index.html After you clone the row and insert its clone in the DOM, you need to enable select2 on … Read more
Sure, with maximumSelectionLength like so: $(“#tags”).select2({ maximumSelectionLength: 3 }); Maximum Selection Length Select2 allows the developer to limit the number of items that can be selected in a multi-select control. http://ivaynberg.github.io/select2/ It has no native callback, but you can pass a function to formatSelectionTooBig like this: $(function () { $(“#tags”).select2({ maximumSelectionLength: 3, formatSelectionTooBig: function (limit) … Read more
select2 v3.x If you have local array with options (received by ajax call), i think you should use data parameter as function returning results for select box: var pills = [{id:0, text: “red”}, {id:1, text: “blue”}]; $(‘#selectpill’).select2({ placeholder: “Select a pill”, data: function() { return {results: pills}; } }); $(‘#uppercase’).click(function() { $.each(pills, function(idx, val) { … Read more
Ok, played with this for a while and found a working solution so I’ll answer my own question here. The key here for me is to build a data array with content for both templateSelection and templateResult. The latter renders fine in the dropdown but any multiline content will not be contained in the select2 … Read more