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

Can't select option after deselecting it with JQuery or in UI

In a select tag with multiple attribute.
When I was using old multi-select JQuery plugin, I find out that I can't select previously deselected options. Actually, I can see that they are selected in UI that created with that plugin, but they were not selected when I submit the form.
Then, I tried to remove selection and select it again from the console without any JQuery plugin.
After deselecting the selection by removing attribute selected from option:
document.getElementById('option_1').removeAttribute('selected');
I was able to select that option again without any problem using JS code:
document.getElementById('option_1').setAttribute('selected', '');
But, when I tried to remove the selected attribute with JQuery removeAttr or prop:
$("#option_1").removeAttr('selected');
$("#option_1").prop('selected',false);
It removes the selection, but I can't select that same option again. Tried both JQuery and JS:
$("#option_1").attr('selected','selected');
document.getElementById('option_1').setAttribute('selected', '');
Again, I can't select the same option with code when I manually deselect option with ctrl+(right-click to selected option)
1. Why it happens?
2. I really liked that plugin and tried to change JQuery code .removeAttr('selected'); to JS code .removeAttribute('selected');. But I got an error. How can I fix that?

Cannot select first option in select2 dropbox

Using select2.js I have a dropdown menu that works great except for one thing: On load I cannot click on the first option in the dropdown menu and have it show as the current selection. When clicking on the first option, nothing happens and if the dropdown loses focus, the placeholder fills the box. If any other of the 40 options are selected, that value text is displayed in the dropdown box and I can use that value in my app.
After an option (other than the 1st one) is selected and I click on the first option again, then the first option value is displayed in the box and I can use it without issue. This issue occurs only on load.
JS
$('.selectArea').select2({
placeholder: 'Area #',
allowClear: true,
disabled: false
});
I have filled the dropdown using a local json file:
$.getJSON('areaList.json', function(json) {
for(i = 0; i < json.length; i++){
$('<option>').attr('value', json[i].MGNT_AREA).text(json[i].MGNT_AREA).appendTo('.selectArea');
}
});
HTML
<select class="selectArea" style='width: 120px; font-family: Arial'></select>
My goal is to be able to load the page with the placeholder in the dropdown box, then be able to click the first option and have it fill the box so I can use that value for other parts of the app.
Any help would be greatly appreciated.

You need to trigger the change event after adding new options to an empty drop down.

I was unable to remove the first option as selected, the attribute selected is not even rendered in web inspector. I was forced to remove the first option as selected because my validation was failing on select2.
What I did to solve the issue is:
After populating the options, I added a new option on top of all the other options and added the selected attribute to it. Immediately after that, I've remove it: Code below:
$(".countries").prepend('<option selected class="placeholdered" value="">Select from the list of countries</option>');
$('.countries').select2().trigger('change');
$('.countries option').removeAttr('selected');
Please notice that I've triggered a select2 change before removing the selected. No need for placeholder...

Adding more JqueryUI combobox to one page with button click

I have a page where i have one JqueryUI autocomplete combobox (like this: http://jqueryui.com/autocomplete/#combobox) and i want add more comboboxes with a button (when i click the button, i add the new combobox with jquery .append function).
But when i click on the button a simple html select dropdown appears, not the combobox.
I want all the added bomboboxes to be autocomplete comboboxes, like the first one.
You can see the example here:
[http://jsfiddle.net/Q48jV/]
http://jsfiddle.net/Q48jV/
Thanks for your time!

In your code add
$('.dropdownclass').combobox()
after append the div
http://jsfiddle.net/Q48jV/1/

JQuery multi select check box dropdown is not unchecked on browser refresh?

I am using JQuery multiselect checkbox dropdown.
$("select").multiselect();
i have two divs in the same html page. in both the divs i have multi select checkbox dropdown.
on browser refresh, the values checked are not unchecked.To solve the issue, i kept below the code.
window.onbeforeunload = function(){
$("select").multiselect("uncheckAll");
};
But the problem is above code unchecks the values of multiselect checkbox only in one DIV. in other DIV's multiselect check box the values are not unchecked. How can i solve the issue?
Thanks!

Try using proper selectors for the select boxes ie) give seperate ids and perform you function of checking or unchecking.

try
$("select").each(function(){
$(this).multiselect("uncheckAll");
});