jquery-select2

this example is not working at all.. Can someone please create this in jfiddle???? Here is the example site. https://select2.github.io/examples.html Thank you so much for the help!!! Found an answer for this. See the below example. Hope this helps others! Here is the Fiddle Here is the script : function formatRepo (repo) { if (repo.loading) return repo.text; var markup = '<div class="clearfix">' + '<div class="col-sm-1">' + '<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' + '</div>' + '<div clas="col-sm-10">' + '<div class="clearfix">' + '<div class="col-sm-6">' + repo

I'm trying to hide some of the select2 options, but when I do something like this: <option style="display: none;">...</option> select2 ignores it, unlike when I disable an option, or make it "readonly". Any ideas? I stumbled upon this subject when looking for an answer to the same problem and i resolved it using the 'templateResult' callback of select2. <select id="mySelect"> <option value="1" data-show="1">1</option> <option value="2">2</option> <!-- option i want to hide --> </select> At the initialization of my select2 : var dataIWantToShow = '1'; $('#mySelect').select2({ templateResult:

I am using the select2 plugin to convert a multiple select html element to a more presentable format. Also I don't think my question is very much dependent on the plugin. What the plugin does internally is - this.select.val(val); where this.select points to the hidden multiple select element. On feeding the function above a val of say - 2,4,0 , the value stored as confirmed when I do an alert(this.select.val()) is 0,2,4 , i.e. with automatic unwanted sorting according to the order of the options in the select element. . :/ DEMO - http://jsfiddle.net/rohanxx/DYpU8/ (thanks to Mark) Is there a

My Question is when ever I bind my Select2 with Multiple with Knockout View Model. After selecting one of the options, the data is lost for the second time KnockOutCode $(window).load(function () { ko.bindingHandlers.select2 = { init: function (element, valueAccessor, allBindingsAccessor) { var obj = valueAccessor(), allBindings = allBindingsAccessor(), lookupKey = allBindings.lookupKey; $(element).select2(obj); if (lookupKey) { var value = ko.utils.unwrapObservable(allBindings.value); $(element).select2('data', ko.utils.arrayFirst(obj.data.results, function (item) { return item[lookupKey] ===

I'm trying to populate a select2 element with a JSON array; but I can't get it. I have the next array: data = [{"id":"Foo","text":"Foo"},{"id":"Bar","text":"Bar"}] And I initialize select2 as follow: $("#selectElement").select2(); I use the next code to populate: $('#selectElement').select2('data', data, true); But doesnt work and I dont know why. Someone can help me? EDIT: I need to populate after the init of select2 (I receive JSON from AJAX) My intention is populate the select2 of my question with the JSON of the AJAX search of other select2. All works well except the populate (I get this

This is very similar to this question on how to add class to select2 element , however the answers there appear to target earlier versions of the framework which has undergone some breaking changes in v4.0 According to this issue to add an additional custom class to select2-container , there were several undocumented properties you could pass to the select2 constructor, including: containerCss , containerCssClass , dropdownCss , and dropdownCssClass . However in version 4 when I run the following code: $('.select2').select2({ containerCss: "wrap" }); I get the following error: Uncaught Error:

Im trying to load the selected values from the database into my multiple select box. When I load the option initially from the database, It work perfect. But I would like to add the SELECTED items for this rrecord. I've tried a few approaches which is a bit hacky, like this. var keywordArray = new Array(); keywordArray = test[0].keyword.split(","); for( var x = 0; x < keywordArray.length ; x++){ foundKeyword = $( "select" ).find("option[value="+keywordArray[x]+"]").text(); $('.select2-choices').prepend("<li class='select2-search-choice'><div>" + foundKeyword + "</div><a href='#' class='select2