Develop Reference

Making select box searchable html

I am dynamically adding select elements in the webpage when a certain action is taken by the user. The problem is that as the select elements are added dynamically, the jquery is unable to make them searchable as it is applied when the document is loaded. How can I make the dynamically added select boxes searchable?
EDIT
I'm using select bootstrap for making the select element searchable.
What I am doing is making the user select multiple parts of an image using select areas and whenever an area is selected, I add a select element corresponding to that area. This is done using a custom javascript in the head of the page. However, these select elements are devoid of any styling as the are added dynamically.
The select bootstrap can make a select element searchable by using data-live-search -
<select data-live-search="true" name="category_name" class="selectpicker" >

You can use a plugin like Chosen. It is very easy to use, just include the files and call it like this:
$(".my-select").chosen();
And if you want to add options dynamically, you can take a look at this answer, which explains how to do it.

You can search for the elements with a selector, even if you bind them dynamically:
$('option').each(function(){console.log($(this).html())});
$('select').append('<option class="option2">test 2</option>');
$('option').each(function(){console.log($(this).html())});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option class="option1">test</option>
</select>

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

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();

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..

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!

Select box with 50+ word select

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.