How can I disable the select2 plugin for certain select dropdowns? - javascript

I'm using the jquery select2 plugin but I want to disable it for certain select dropdowns. Is there a way to exclude select elements the plugin will be applied to?
I was thinking maybe a class on the select element to tell the plugin to ignore it.

$('select').not('.yourExcludeClass').select2();
Here's a link to the docs for $.not()

While just not calling .select2() on the elements which you don't want to be dropdown works, you might want to disable Select2 after you've already initialized it.
In order to do this, you have two options
Visually disable it like you would a standard <select> by calling $("select").prop("disabled", true).
"Destroy" Select2 so it goes back to looking like a standard dropdown by calling $("select").select2("destroy").

You can disable it using -
$('select').select2("enable",false);
using JQuery.

I am assuming you are applying it to all selects via:
<script type="text/javascript">
$('select').select2();
</script>
There are a few ways you could solve it, but the easiest would be to add a class to the selects you want to be styled And only call the select2() on those:
Add the class addStyling to your selects to be styled
Initialize them with $('select.addStyling').select2();

Related

Conflict between jquery.multiselect and jquery.selectbox

I am using jquery.multiselect.js and jquery.selectbox-0.2.js in my application for muti-select drop down and single select drop down.
I am able to use both the drop downs perfectly alone. If I have a page with both the drop downs, i am having an issue.
The issue is that , the muti-slect dropdown does not close, on clicking outside.There is no issue for single select drop down. So once i expand the muti-select drop down and click somewhere on the page, it does not close.
What does your selector look like? Is your selector inclusive of select elements in general or just those that are multiselects? For example:
$('select').multiSelect();
would affect all select elements, including those bound to the selectbox plugin.
If you haven't yet, make sure your multiselect plugin is only affecting select elements with the multiple attribute:
$('select[multiple]').multiSelect();
It's likely that your selectbox plugin could be affecting the multiselect elements as well. You'll need to filter these selects from those with the multiple attribute. You can do this two ways:
Provide the single selects with an identifying class (i.e. class="single-select"), which is more verbose.
Use jQuery's :not() selector, like so: $('select:not([multiple])').selectbox();
Jquery select box plugin has the below function
$("html").on('mousedown', function(e) {
e.stopPropagation();
$("select").selectbox('close');
});
I commented the e.stopPropagation(); line..Now on clicking outside, it invokes the buur method in mutiselect...Thats the close.. I understand that because of e.stopPropagation(), the close of mutiselect was not getting invoked earlier..

JQuery: How to force a select option to be "selected", using FancySelect plugin?

I have a direct question: How to make "selected" an option of a select using FancySelect plugin?
This is the situation: I have a select with two options and two links. The links should be synchronized with the select. That means that when clicking on a link, it must make "selected" an option of the select.
It is important notice anyway that it is not a normal select, but i am using a JQuery plugin called FancySelect: http://code.octopuscreative.com/fancyselect/
And this can be the main reason why normal solutions found elsewhere in StackOverflow did not apply to my specific case.
So the point is not how to make "selected" an option of a select, but how to make it "selected" while using the FancySelect plugin.
Here you can understand better:
http://jsbin.com/AqoYucAG/11/edit
This is the code i am trying to use, but is not working yet:
$( "#a1" ).click(function() {
$("#selector option:first").attr('selected','selected');
});
Can you tell me please how can i force an option of a select to be "selected"?
Thank you very much!
It seems like you are using a select plugin. So generally they convert the underlying select to divs/spans etc to achieve good look and feel. And hence when you change the select option you need to notify the plugin saying that you have updated it. In this case it seems like you can trigger a change/update event to do so. You need to do the same thing (triggering an update) when you add options dynamically to the select as well, so that the plugin gets updated.
So try:
$( "#a1" ).click(function(e) {
e.preventDefault();
$("#selector").val("1").trigger('change');
});
According to the plugin code as shown below, it updates the text while change is triggered.
sel.on('change', function(e) {
if (e.originalEvent && e.originalEvent.isTrusted) {
return e.stopPropagation();
} else {
return updateTriggerText();
}
});
Easiest way, you don't need any option tag
$("#selector").val("myVal");

jQuery UI Multiselect widget clear all check boxes

Hopefully a quick one...
I need to fire the uncheckAll event in the click event of a separate button on my page, I have tried the following:
$('.masterProviderOrgsListBox').multiselect().uncheckAll();
but this isnt a recognised method. I basically want to fire the same method that is fired when you click the "Uncheck All" box in the header.
I was previously doing this:
$('.masterProviderOrgsListBox option:selected').removeAttr("selected");
but this removes the selections on the actual multiselect rather than the jQuery UI widget.
Couldnt find anything in the documentation, any ideas?
Methods
After an instance has been initialized, interact with it by calling
any of these methods:
// example: $("#multiselect").multiselect("method_name");
...which can be found in the widgets documentation under Methods
$("#multiselect").multiselect("uncheckAll");
1) first, you need to set default value of the control.
jQuery('#multiselect').val("");
2) Then, execute below code to reset the control.
jQuery('#multiselect').multiselect("refresh");
$("#multiselectoption:selected").removeAttr("selected");
$("#multiselect").multiselect('refresh');
refresh should be call after clearing the drop down.

How to select drop downs inside any div?

I am using ExtJs with Jquery. I have a panel under which I have check boxes, radios and drop downs. I am using the following code to get all the items under the panel.
$('#panelId : input').each
This works for radio and check boxes. But, I am trying the following for drop down and it is not working
$('#panelId : select').each
Experts please guide me.
Note: I am painting raw html into the panel using XTemplate. So I am not able to retrieve the items using extjs (Rather I don't know!). Can any one suggest the same using extjs?
:select is not a valid selector. Please read the jQuery selector documentation.
You can see a quick fiddle here to see it working and help you understand how to use the proper input or select jQuery selectors.
The jQuery selector function $ expects a valid CSS selector as an argument. If you want all <select> elements under the parent ID, then this should do what you want:
$('#panelId select').each(...
Note in the above that there's no colon between #panelId and select. Colon characters in CSS are reserved for pseudo selectors like :hover.
If you want more than one kind of child element, you can specify multiple selectors by separating them with commas. e.g.
$('#panelId select, #panelId input').each(...
An even better way would be to start with the panel, then select just the matching descendants:
$('#panelId').find('select, input').each(...
Hope this helps!

jQuery Selectbox Append Options OnChange

I'm working with jQuery and a plugin called jQuery.SelectBox
I have 3 selectboxes, selecting an option in the first selectbox will change the options in the second one.
My problem comes when I try to insert values in the second selectbox via append function in jQuery. Everything works fine but the new options are not clickable.
You can see the problem right here: http://incubadora.gelattina.com/impac/galeria.html (scroll down and to the right), there are the three selectboxes.
From what I understand, you put in a normal select, and this does a dynamic creation of a stylized 'select box' via jQuery.
The problem, I would guess, is that, since you're adding items after the select box's initialization, the new items don't have any sort of action listeners on them.
I can't seem to find any documentation on this SelectBox plugin, but you need to find a way to Bind the click and hover actions provided by SelectBox onto you're newly added items.
You can try calling the .selectbox(); function on the select elements after you've added the new options to see if that works.
Hey I wrote a select box plugin called Selectzor, just for this reason.
It should accomplish everything you need.

Categories

Resources