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

Want to take a radio and checkbox value from one form to another

I have values from one form that need to be transferred to another.
var manager = $('input[type=checkbox]:checked').val();
I'm capturing the value with this. and trying to send it to this.
$('input[type=checkbox]:checked').val(manager);
but I don't know what to put into the next set of jquery to transfer it over.
.val() works for strings/numbers but not checkboxes or radio buttons which I am trying to do.
Please advice.

Try jQuery prop() function to transfer the state of one checkbox to another.
Also use correct selectors. $('input[type=checkbox]:checked') will only select CHECKED checkboxes.
see this fiddle for an example: https://jsfiddle.net/iPirat/p5f07br4/
in this fiddle, the checkbox in the first form is selected similarly to what you did.
the checkbox insecond form is selected using an ID.

How to add a new row of text box and drop down?

I'm currently working on a rails project.
I have a text_field and a select_tag on the same row. I want a new row of text box and drop down list to be created whenever I have at least one character typed in the current text box. But I'm not sure how to do so. I assume I'd need to use jquery? But I'm still a newbie with web programming...
Please help! Many thanks!!!

You'd add fields and then apply a hidden value to them using jQuery's document ready function. Then apply a keyup function to the existing field you want it to trigger off of that calls show on the hidden item.
Here's the jquery I used in a wordpress page to do exactly that:
$(document).ready(function() {
$("#fieldtohide").hide();
$("#nonhiddenfield").keyup(function() {
$("#fieldtohide").show();
});
});

Dropdown form field

With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?

I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...

Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.

How to change rendered selected option in select box with jquery

I have tried many ways to select an option with jquery including .val("0") .attr('selected', 'selected') and .attr('selected', 'true') and the TexoTela plugin. They all seem to update the html but the browser still shows the last item selected by the user.
Try out this fiddle... Select the dropdown value 1 and then click the link.
Is there any way to actually update the displayed value?

You mean change which item is selected?
$('select').val('0');
There are other ways, but this is the basic, following your example.
jsfiddle
You can read up on the documenation for .val() here, and the snippet:
checks, or selects, all the radio
buttons, checkboxes, and select
options that match the set of values.
EDIT for jQuery Mobile
For jQuery Mobile you also need to refresh the select as mentioned in the mobile docs:
If you manipulate a select via
JavaScript, you must call the refresh
method on it to update the visual
styling.
You can do this by:
$('select').selectmenu("refresh",true);

You're setting the option value to zero.
Set the select not the option val
$('select').val('0');
and you'll probably want to use an #id instead just a 'select' selector.

Still use your .val("0") to set the value, and to update in the browser you have to use one of the following:
.trigger("liszt:updated");
or
.trigger("chosen:updated");
Just one will work, depending on how you create your select.
It's gonna be like:
$("#Your_select").val('0');
$("#Your_select").trigger("liszt:updated");