Develop Reference

Automatic search for bootstrap-select with jQuery or JavaScript

As you can see on this link there is a bootstrap select box option which allows you to do live search for select box and find the option which you want.
The thing which i want and i don't have is searching on this table automatically with jQuery or JavaScript code.
If you didn't understand what i meant yet, there is an example :
$(".selectpicker").selectpicker('val', "test").selectpicker('refresh');
As you can see this code , this code will change the value of bootstrap select box option and then its will refresh it so select box value will change and the option on it which has value="test" will become selected and the bootstrap select will work well and you can deselect the option.
The thing which i want is search something after we refresh the select box with this code .selectpicker('refresh');.
Do you want to know why do i need something like this ? Because i using bootstrap select on my project and the select box has some options like Select All and when a user choose this option this code will be happen :
$(".selectpicker option").attr("disabled",true);
$(".selectpicker").selectpicker('val', "Select All").selectpicker('refresh');
And after this code happens the option of select box will be disabled and its ok but the problem is the select box have to refresh for showing that all of options disabled because all of them selected already and after refresh happens its will clear the search result and the search input will be still stay in the same thing which user searched in before but its not searching it anymore. And the thing which i want will fix this problem i mean i want to make it search the thing which user searched before after refresh.
The code which i looking for is something like this :
$(".selectpicker").selectpicker('search', "Some words").selectpicker('refresh');
Thanks.

$(document).on("change","#select-picker",function(){
$search_value="blob blob";
$("button[data-id='"+$(this).attr("id")+"']").next().children(".bs-searchbox").children("input[type='search']").val($search_value).trigger('propertychange');
});
// Bootstrap-select v1.13.9

How can I choose a select option in jQuery as though it were clicked with the mouse?

I am building a search tool with various select drop downs that populate with options via AJAX. The possible options populated are based on the the option chosen in the preceding select drop down. For the purpose of this tool, I want to have the first select box hidden but still need to select an option in that box so that it triggers the AJAX call on the following box, something that is supposed to happen as the result of an "onchange" event.
I've tried all kinds of different code to simulate a mouse click selection of a particular option but, while I can get the option selected, it still isn't triggering the event properly to set off the AJAX call in the following select. This is as far as I've gotten:
jQuery('#form select').first().val('the-value').trigger('click').trigger('change');
From everything I've read, that should set the option value and trigger a change event much like clicking the option. Still, this isn't working. Thanks!

You only have to use val(), like any other field...
$("select").val("2").change();
http://jsfiddle.net/Loenix34/3LbjY/
We also use change() to call associated events.

Instead of setting the value of the select, set the selected property of the given option, and then trigger a change.
$("option[value='the-value']").prop('selected', true);
$("#form select:first").change();
Fiddle Demo

Re-enable radio inputs with a clear function

I've tried a number of different things, including typical form reset and jQuery examples I've found across the web with no luck.
Screenshot:
The Goal:
I have a rankable list where a user is expected to rank items from 1-6 according to importance to them. If they select "2" for a certain row, we don't want to let them select "2" for another row. Here is the jQuery that's accomplishing this:
// Disable sibling radio buttons in form once an item is selected
$("input:radio").click(function() {
var val = $(this).val();
$(this).siblings("input:radio").attr("disabled","disabled");
$("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});
The Issue:
This code seems to be working, with a couple of quirks.
The code correctly disables sibling rows, but if the user wants to change, they're stuck. They can click "2" on a row, then click "3" on the same row, but that leaves all other "2" and "3" options disabled completely.
The user needs a way to completely clear the form via a "start over" or "reset" button that apparently needs some special jQuery magic that I haven't been able to figure out yet.
I took code referenced in another post from this url, but it seems to only half work on my site. I notice on that fiddle link that if you click "1", it also disables "2" and "3" on the same row, which doesn't happen on my local development attempt. It does, however, permanently disable "2" in other rows if you were to click "2"...so I'm unsure why it works in the example but not my code (above).
There's got to be some easier way around this that I'm just not seeing here. I appreciate any help or code examples that might work along these lines.

Instead of outright disabling radio options that are not valid, you can instead take one of two approaches:
When the user clicks an option, validate the option on the fly, i.e., that "3" is not already selected when you click another "3". If not valid, then display a popup to user and clear it out.
When the user clicks an option, say a "3", then clear out all other "3" options so that only one is rated at that amount at a time.
Here is a sample code that will use method #2, clearing out all same value options whenever an option is clicked: http://jsfiddle.net/xy9wC/

From a users perspective, disabling these kinds of radio buttons may be very annoying to deal with as it forces the user to use two clicks instead of one while selecting something else.
A better alternative would be to "suggest" errors to the user, then enforce them on submit. For example, you could make the row with the invalid option red, then allow the user to discover the error and fix it themselves.
An even better way than that, use jQuery to create a sortable list.
http://jqueryui.com/demos/sortable/
-Sunjay03

De-select all html select options in a control that does not allow multiple selection

I have a web page with several HTML Select controls that all allow multiple selection. Next to each control we have a "Clear" button that de-selects all selected items in the control, with the onclick that looks something like this:
<input type=button value="Clear" size=5 onclick="selectOptions('n.MyControl', false)">
The called Javascript code looks like this:
function selectOptions(controlName, bSelectItems)
{
for (i=0; i < document.myForm[controlName].options.length; i++)
{
document.myForm[controlName].options[i].selected = bSelectItems;
}
}
It works really well with the Select controls that allow multiple selection, but I just added a Select control that does not allow multiple selection (i.e. does not have the "multiple" attribute), and this code does not clear it. If I add the "multiple" attribute, the Clear button starts working again, so I know it has something to do with the fact that I am not allowing multiple items to be selected.
My question is, why does the above code not work and more importantly, how can I get my new Select control cleared in JavaScript?

The reason your code doesn't work is because you are trying to iterate over each option and do something, but since (like you said) the multiple attribute isn't set, it doesn't let you modify multiple options.
As for fixing it, you can try to get the selected option and then just deselect that single option.
Update:
I don't know for sure that this is the ideal solution, but it seems to work for me in IE8.
document.getElementById('myselect').selectedIndex = -1;
Of course you can get the select element whichever way works best for you, but just set the selectedIndex attribute to -1.

There is no such thing as a cleared single-<select> box. One option will always be selected as long as there are any options in the select at all. If no options have selected set at first load time, the first option will automatically get selected.
The usual approach is to have the first option as a dummy-option like <option value="">(Please select a thing)</option>, and reset to that (with select.selectedIndex= 0).

Clean and accesible Other option (Check box and text box)

When I have a set of either check boxes or radio buttons I often need to have an Other choice. This check box or radio button is very often accompanied by a text box where the user is supposed to fill out what this Other is.
How do you usually handle this set up? What kind of markup do you use? What do you require in your validation? Do you use java script for anything? For example:
How do you make the form accessible? Do you use and how do you use the label tag, for example.
Do you connect the check box and text box in any way with some javascript? For example, do you activate the text box when the check box is checked? Do you check or uncheck the check box automatically if the text box is filled out or cleared?
Do you let validation fail with error messages if the check box is checked but the text box is not filled out, or if the text box is filled out but the check box is not checked? Or do you just consider it not filled out and not checked?
Very unsure how to best deal with this issue, so any advice and examples are most welcome c",)

Typically when I have dynamic forms, I insert the input dynamically. That is, in the case of jQuery, I'll use .append('<input...') or some other similar function to actually insert the elements, and id it (or class it, depending), so that it can be easily .remove()-ed if the user decides they want to use another option instead. Validation is either handled via an onClick on an input button. If I'm feeling feisty, I'll go the AJAX route, and skip the <form> altogether.
I would definitely let the validation fail. They want "Other", and you want to know what "Other" is. If you don't care what Other is, then don't bother with the input box.
Edit: Might look something like this.
$('input[type="radio"]').click( function() {
if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
$(this).after('<textarea name="other"></textarea>');
} else {
$('textarea[name="other"]').remove();
}
}
The click will react to any radio being clicked, and the if will make sure that it's only the "other" radio button that will react to the click, and that it will only react if there isn't already a textarea after it (so you don't get multiple textarea propogations).
On the processing side of things, you'll have to do a validation at first to see if other was checked, and to grab the input of the textarea if it was. You should probably use server-side validation for that.
Hope that gets you started.

I usually enclose my radio buttons in a label like this:
<label><input type=radio value=xyz name=stjames>Saint James</label>
this way the user can click on the text to trigger the button.
When deciding how to behave, I usually say to myself "what do you think the user expected when they did that..." and that often gives me the answer. So, upon click or Focus of the text box, turn on the radio that goes with it. This won't work if you've disabled the text box!
( ) US ( ) UK (*) Other [________________]
If the Other choice is a dangerous one (deleting data), though, I'd disable the text box until the user explicitly clicks Other. Then, the Radio drives the Text Box instead of the other way around. You want the user to have to go through another step in this case. It depends on the situation - think about what'll happen in each case.
I usually try to make it impossible or annoying for the user to do something 'wrong'. EG disable the OK button if something is inconsistent. Or, select the Other radio when the user types in text. If there's text in the text box but the radio buttons are set to something different, I'd usually just ignore the text. But if it's a serious/dangerous situation, you want to make sure the user's made up their mind; if you delete the text when the user chooses a different radio, that might piss them off but it might be appropriate if they should be careful.