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.
Related
I have a form with 3 select lists, I'm using the jquery multipleSelect addon to select lists using checkboxes, I want to be able to select all selections from a specific group, I can do this for everything on the page using:
$('input[type=checkbox]')
Can I select all checkboxes from a group by including the id of the parent node?
I'm open to other methods of achieving the same.
Yes you can do,
$('.parentclassname input[type=checkbox]')
Or
$('#parentId input[type=checkbox]')
Or
$(parentselector).find('input[type=checkbox]')
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 am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.
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!
I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)
Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div
Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax