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');
Related
I have a select2 box in bootstrap modal, I want to change the value of the select2 box but it didn't work.
I tried every single solution in previous posts and results but none of them got it work.
I use select2 4.0.2, I tested:
$('#select_id').val('val').trigger('change.select2');
$('#select_id').val('val').trigger('change');
$('#select_id').val('val').change()
It works one or two times then it stops working (randomly)
It works fine only when I change the select2 back to 3.x.x
$('#select_id').val('val').trigger('change');
is the right way, see here
$('#select_id').select2('val', selectedValue);
For Select2 with Ajax call, I struggled with lot of options, but none worked. Then i came to following solution, which works like charm
$("#select_id").html($("").val('val').text('text')).trigger("change");
To programmatically select an option/item for a Select2 control, use the jQuery
$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
You can also pass an array to val make multiple selections:
$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
I have used the following code in 4.x.xx version and it is working
$('#select_id').val('val').select2();
If you, like me, have added a custom handler for the select2:selecting event the correct complete answer to changing a value and triggering the custom select2 event would be:
$('#select_id').val('val').trigger('change').trigger({
type: 'select2:event_name', // It worked for me with select2:selecting and select2:select
params: {
args: { // Only use 'args' if using select2:selecting, select2:select does not use it
data: varWithEventData
}
}
});
For those who facing an issue like this:
If you're using multiple select elements and have a common event handler (like $(".mySelect2Inputs").click(...) ) when you do $('#mySelect2').trigger('change') the click event handler is gonna trigger multiple times ($(".mySelect2Inputs").length times).
To prevent this situation, you must use $('#mySelect2').trigger('change.select2') (attention to .select2 namespace!).
From the select2 docs:
https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event
It's common for other components to be listening to the change event, or for custom event handlers to be attached that may have side effects. To limit the scope to only notify Select2 of the change, use the .select2 event namespace:
$('#mySelect2').val('US'); // Change the value or make some change to the internal state $('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes
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 am using the JQueryUI Autocomplete Combobox at the following link http://jqueryui.com/autocomplete/#combobox. How can I prevent a change? I only allow a change on a condition and it is still calling a menuselect event w/ ui-autocomplete-item and allowing the change. That is line 6881 "this._value( item.value ); of the jquery-ui-1.10.3.js.
Everything worked prior to the change of a select to a jquery ui autocomplete combobox and everything would be fine now if I could prevent the menuselect function.
Thanks
You need to do the condition and event.preventDefault in the select event...
I am using Struts jQuery plugin. Problem is with <sj:tabbedpanel>.
I want to preselect the tab depending on the input while loading the page.
I know there is property selectedTab="1".
But I want it to change it while loading the page using jQuery.
In jQuery-UI plugin, there is function $("#tab").tabs('selected',2) which does that.
What is the similar function which does the same thing here.
Try this:
<sj:tabbedpanel id="tabbed" selectedTab="%{selected}"></sj:tabbedpanel>
selected should be a parameter, which decides the opened tab.
If you still wanna use jQuery, please check the api: jQuery Tabs API
here is the important part:
A series of events fire when interacting with a tabs interface:
tabsselect, tabsload, tabsshow (in that order)
tabsadd, tabsremove
tabsenable, tabsdisable
If you want to do this from javascript then use option to set selected tab.
$("#tab").tabs( "option", "selected", 2);
I am having a html dropdown
<select id="ExternalIp" onchange="externalIpchange()"></select>
I bind the data to dropdown through jquery and a I am passing data from controller which is working properly. I want to change the look and feel of the dropdown so I called a function
$("#ExternalIp").selectbox();
Now the look and feel of drop down is changed but it is not showing the data which I bind to dropdown. I am not getting what is the problem. Plz help
It appears as if the jQuery plugin you are using resets the values bound to the select list.
Look for a method provided within your jQuery plugin to rebind the data which you earlier attached with jQuery or style your element first and then try binding the values.
Cheers!!!