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!
Related
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();
I have implemented the jquery multiselect addon and got it working fine. I have a long list of select options and are divided by optgroups. While optgroups organizes my long list but still users still have to scroll for a while to get to the bottom option. I am simply looking for a solution to have the optgroup collapsed by default and un-collapsed when you click on the group.
At the moment when you click on the optgroup it automatically selects all options under it which I would like to prevent and instead replace that with a hide function instead. I know that jquery by default cannot target a select's optgroup but the Jquery Multiple select addon has an event handler that apparently allows you too. If you scroll a bit half way down their site it gives you all the event handlers this addon supports. I was really interested in the optgrouptoggle event:
Fires when an optgroup label is clicked on. This event receives the original event object as the first argument, and a hash of values as the second argument: js
$("#multiselect").bind("multiselectoptgrouptoggle", function(event, ui){
/*
event: the original event object, most likely "click"
ui.inputs: an array of the checkboxes (DOM elements) inside the optgroup
ui.label: the text of the optgroup
ui.checked: whether or not the checkboxes were checked or unchecked in the toggle (boolean)
*/
});
I tried implementing a show hide function as follows but I still new with jquery and might be botching this completely. Any help would be appreciated.
http://jsfiddle.net/akhyp/1986/
$("#selected_items").bind("multiselectoptgrouptoggle", function(event, ui){
$(this).children().show();
}, function() {
$(this).children().hide();
});
A few problems with this approach, some in your code, some in the plugin's API:
Your demo code references $("#selected_items"), which is nowhere in your markup. Change the selector to $("select") to match your declaration of the multiselect above. Better still, cache the jQuery object in a variable: var $multiselect = $('select');
The docs specify using bind to attach an event listener, but bind is deprecated in recent versions of jQuery. Use on instead.
You're passing two functions to the on/bind method--it only takes one. Instead of using hide() and show(), you can just use jQuery's toggle method.
The multiselect plugin isn't structuring its generated markup semantically, so optgroups and their child option elements are translated into straight-up li elements, with the optgroup and option elements as siblings. That means you can't use children() the way you would hope. However, the API provides you with a way to find the checkboxes that were associated with the optgroup: ui.inputs. From those, you can find each of the parent li elements and hide them. Unfortunately, it doesn't look like the API gives you a way to directly address them, but you can use a code snippet like so:
var parentLiOfInput = function(input) {
return $(input).closest('li');
};
var $listEls = ui.inputs.map(parentLiOfInput);
// $listEls is now an array of jQuery objects
// Note this isn't the same as a jQuery wrapped set--
// you can't do $listEls.hide(), for example.
Hiding the generated "option" elements will prevent the plugin from working--it uses a jQuery selector to toggle the checkboxes, and that selector relies on the associated elements to be visible.
That last point is the blocker: Once you hide the checkbox, the plugin will fail on the next optgroup click. Demo of the failing behavior.
I don't really see any options for you at this point, without directly modifying the code of the plugin.
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..
I want a list of items (td's in each tr) except for certain columns, say the 2nd and 3rd last column. How can it be done? I could decorate the specific td's to exclude with some attribute, or can I exclude them based on index alone.
Examples below remove the items I want, although I actually want to attach to mouse-over event but left out for simplicity.
Here is script get all columns except last 2 columns (example does not remove last 2):
$('table').find("tr td:not(:nth-last-child(-n+2))").remove();
I tried this to exclude the 2nd and 3rd from the remove, but it doesn't like the comma separated selector (I thought you could do a multiple selector like this?):
$('table').find("tr td:not(:nth-last-child(2),:nth-last-child(3))").remove();
Here an example is on jsfiddle.
edit: I'm using javascript 1.8.3
Your code works fine, you're using an old version of jQuery (1.7). The :nth-last-child selector was added in jQuery 1.9. Upgrade, and it will run correctly.
$('table').find("tr td").not(':nth-last-child(2), :nth-last-child(3)');
Try out the following,
$('table').find("tr td::not(:eq(2)):not(:eq(1))");
I hope it will help you.
I have a number of subtopics I would like to select using a select / dropdown box. The problem I have is that each subtopic is 30-50 words long. Does anyone know of any way that I can have multi-line selects within a select box? Right now I can show the select but because of my page size I have some data trucated.
I guess maybe jQuery has a solution but not sure as I'm not so familiar with jQuery
You better use autocomplete
To make the dropdown elements multi-line, just edit the css of .ac_results li making it taller (for instance, change line-height)
Instead of using a stock-HTML select element, perhaps consider using a div with n other divs inside it, each with their id as the ID of the subtopic (likely you'll need to prepend something if the Ids are numerical). Show the div on click of whatever, select the subtopic on click of the individual subtopic div. You can then style the divs how you want, allowing text to wrap, etc. This would also work well with an unordered list.
G
I'd change my mind using something different than a select, rather using a div (or dialog, or accordion) with selectable items in it using jQuery UI.