jquery-select2

Basically what I'm looking for is the ability to hide options from the dropdown of select items. So, technically they would still be options, but you just wouldn't be able to click them since they're hidden. I've looked through the docs and have found things related to disabling, unfortunately I very specifically want the ability to hide items. Does anyone have advice on how to accomplish this? Were it possible to do something like have the select do some specific mapping between the original <option> element and the select2 copy of that element, that would work as well. As an example, say,

I have a form with multiple text inputs and some select2 elements. Using the keyboard to tab between fields works fine - the Select2 element behaves like a form element and receives focus when tabbing. I was wondering if it is possible to open the dropdown when the Select2 element gets focus. Here's what I've tried so far: $("#myid").select2().on('select2-focus', function(){ $(this).select2('open'); }); But using this code makes the dropdown to open again after a selection is made. Working Code for v4.0+ *( including 4.0.7) The following code will open the menu on the initial focus, but won't

I have used select2 to select multiple options from a drop down, but is it possible for select2 to select the full optgroup?? What I want is when user select the option group all the child options should be selected. And I want to do this using jQuery Select2 . How could I do this? 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, and instead

I have a select2 drop-down for which I provide a matcher function. It is initialised like this on initial page load: jQuery(document).ready(function() { jQuery(".my_select2").select2({ matcher: function(term, text) {...} }); }); That works find on initial page load. Now, I have additional drop-downs ( select elements created dynamically (pulled in via AJAX, i.e. jQuery(match).load(url) . These additional drop-downs do not get intialised as select2 widgets, which is understandable, even though they match the original select2 selector. So, how can I tell jQuery to treat these dynamically-created

I'm trying to validate select2 field using jquey.validation plugin but nothing happens. I want to make select required field. I'm using this custom validation function: $.validator.addMethod("requiredcountry", function(value, element, arg){ return arg != value; }, "Value must not equal arg."); and this is the rule: rules: { country: { required: true, requiredcountry: "" } } What select2 field should I use for the rule to match? I appreciate any idea how to make select2 working together with jquery.validation 10x ABIRAMAN Just add ignore: [], in Your form validation function. It will enable

I'm using select2 jquery plugin with twitter bootstrap. It's working fine for smaller number of items. But when the list is huge (more than 1500 items) it really slows down. It's slowest in IE. Normal Dropdownlist works very fast with more than 1500 items. Are there any workarounds for this situation? You can make this work good even in IE8 with paginating the suggestions, Code: // Function to shuffle the demo data function shuffle(str) { return str .split('') .sort(function() { return 0.5 - Math.random(); }) .join(''); } // For demonstration purposes we first make // a huge array of demo data

I want to be able to set the default/selected value of a select element using the JQuery Select2 plugin. One more way - just add a selected = "selected" attribute to the select markup and call select2 on it. It must take your selected value. No need for extra JavaScript. Like this : Markup <select class="select2"> <option id="foo">Some Text</option> <option id="bar" selected="selected">Other Text</option> </select> JavaScript $('select').select2(); //oh yes just this! See fiddle : http://jsfiddle.net/6hZFU/ Edit: (Thanks, Jay Haase!) If this doesn't work, try setting the val property of

Ok, I'm sure there's something simple set wrong here but I'm not 100% what it is. So I am trying to use Select2 AJAX method as a way of users to search a database and select a result. The call itself is coming back with results, however it will not allow me to select the answer from the list. It also doesn't seem to allow you to "select" it on hover or up/ down arrow. So without further ado, here is my code: index.html <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="select2/select2.css" media=