The new version of Select2 4.0 by specifying allowClear: true, put's an 'x' on the select box. Clicking on it removes the selected entry and also opens up the box. This is a new behavior. In the previous version the box didn't open when 'x' was clicked. Is there a way to turn off this behavior?
Related
I'm using a select2 ajax based dropdown with a single select. This is working perfectly.
There is another input field also on the page and when this is interacted with, I would like to preload the select with a certain amount of options - say 4.
I am using the below to insert the options dynamically, but this is only presenting 1 selected option and when I click the dropdown I get the "please enter x characters" message and don't see what I've preloaded. Is this something that can be achieved?
var newOption = new Option(data.text, data.id, true, true);
$('#selectid').append(newOption).trigger('change');
Thanks,
David
select2 clear is not working when I am select option manually and clear t by js
Here is my function to clear select2 selected option
$('#select2_id option').removeAttr('selected');
Try this
$('#select2_id').val('').trigger('change);
Instead of
$('#select2_id option').removeAttr('selected');
As the title shows, I used the Select2 without any error. The component works properly when I enter characters for search. The problem is that, when I click to open drop-down list, an empty list is shown. I checked the styles and scripts' probable conflicts, and test a simple lite version of select2 without any extra library. Unfortunately, The problem remains.
The problem is originated from minimumInputLength configuration parameter. If you set this parameter, the drop-down-list will be empty until a search term character enters. I commented out the problematic line, and everything seems good now.
$("#itemsList").select2({
placeholder: "Select Item",
language: "en",
// minimumInputLength: 1,
data: s_data,
formatSelection: format_data,
formatResult: format_data
});
I have implemented select2 widget, version 4. It works, but the x icon. It is not clearing the selection.
If you see this doc: https://select2.github.io/options.html, it says that this a problem in fact, but the documentation is incomplete for this.
Anyone has solved this already?
Thanks
Jaime
No it's not a bug. The "X" icon requires placeholder option.
Without it, clearAllow option cannot be used. So, right code will be like this:
$(".js-example-placeholder-single").select2({
placeholder: "Put some text...",
allowClear : true
});
By the way, there is undocumented option called debug. If you pass it to select2() method, the found errors will be printed on console. For example code in below:
$(".js-example-placeholder-single").select2({
//placeholder: "Put some text...",
allowClear : true,
debug: true
});
Will get in browser's console:
Why allowClear requires placeholder option?
The real drop down list, that you create with <select> and <option> elements hides by select2. And created new one.
In the new created drop down list, the field that user see (without drop down list) created automatically. Each time when you select new option, select2 will change previous Field with new one.
When X icon clicked, it also delete main field. And creates new field with parameters of placeholder.
Finally I have found it is a bug in Select2 4.0.2.
The solution is this, in select2.js, line 1760.
This has to be replaced:
this.$element.val(this.placeholder.id).trigger('change');
this.trigger('toggle', {});
By:
this.$element.val(this.placeholder.id).text(this.placeholder.text).trigger('change');
//this.trigger('toggle', {});
This solution also causes the dropdown not to appear when selection is cleared.
In my case, the clear button is not working even placeholder option is set. I need to add z-index property:
.select2-container .select2-selection--single .select2-selection__rendered {
z-index:1;
}
Adding of the empty select option with value '' helped me.
Select2 4.0.3.
I want to do just a simple users loading in select 2 using AJAX. My code is as simple as:
$('.loadUsers').select2({
placholder: "Test placeholder",
minimumInputLength: 2
});
Now the first problem is the placeholder is not even working (nothing is displayed, no error at all) but the select2 input is displayed properly. Moreover, when I try to add the ajax option to select2 parameters I get the following error:
Error: Option 'ajax' is not allowed for Select2 when attached to a <select> element.
How to solve these problems?
The version of Select2 I'm using is 3.2.
// EDIT
Ok, I somehow managed to fix the AJAX loading by assigning the select2 to a hidden input instead of a select and adding both data and results properties. However the placeholder is still not showing. Why?