We Keep Coding

How do you select an option value from a select box if you know the value?

Given the following jQuery plugin: http://selectric.js.org/index.html which replaces the functionality of that of a regular select box by using custom UL LI lists,
Based on the plugins documentation, I know that you can programmatically select an option value if you already know the index to select by using the following code:
$('#idofselectbox').prop('selectedIndex', 3).selectric('refresh');
But they do not include a sample to be able to find and select an option value by a value.
For example,
Let's say i'd like to select the option value named 'apples' without actually knowing its index in the select box. Is this even remotely possible?
<select id="idofselectbox">
<option value="oranges">oranges</option>
<option value="pears">pears</option>
<option value="apples">apples</option>
<option value="strawberries">strawberries</option>
</select>

You can set the value as if it's a regular combo box, then call refresh on selectic to refresh the UI.
$('#idofselectbox').val('apples').selectric('refresh');

Changing "Selected" Attribute of a Dropdown-List does not work properly

I have a dropdown-list in a form, whichs onchange event gets listenend by jquery and leads to an AJAX call. Afterwards Jquery just sets/removes the selected attribute depending on the answere of the server:
$( document ).ready(function(){
$("#user_select").on("change", function(){
var value = $("#user_select").val();
$.ajax({
url: "../ajax/change_permission.php",
method: "POST",
data: { user_id: value }
}).done(function(data){
var i = 0;
while(i < 4){
$("#perm_"+i).attr("selected", false);
$("#perm_"+i).removeClass("active_perm");
i++;
}
$("#perm_"+data).attr("selected", true);
$("#perm_"+data).addClass("active_perm");
});
});
});
In my user_select dropdown are my users whose permission should be shown if I select it.
The form (where the select should be set to) looks like that:
<select id="user_permission" class="form-control">
<option id="perm_0" value="0">Berechtigungsstufe</option>
<option id="perm_1" value="1">Administrator</option>
<option id="perm_2" value="2">Super-User</option>
<option id="perm_3" value="3">User</option>
</select>
The problem now is that if a option has already been selected once, it cannot be set to active again, or better said, the selected tag still gets aplied to the option, but it isn't changed anymore (just stays on option zero). After i've selected every option once, the select looks like that:
<select id="user_permission" class="form-control">
<option id="perm_0" value="0">Berechtigungsstufe</option>
<option id="perm_1" value="1" class="">Administrator</option>
<option id="perm_2" value="2" class="">Super-User</option>
<option id="perm_3" value="3" class="">User</option>
</select>
The selected="selected" attribute still gets applied to the option, but the selected option won't be changed (the display isn't changed) anymore. Already thought it is bugging because of the empty class tag, but it changes nothing if i remove it.
Anyone having an idea what may cause that problem?
EDIT: All in all it is that JSfiddle just without the Random values :p
EDIT ANSWERE: The Jquery ".attr" does not work properly in Firefox 42.0. Instead i've used ".prop", what works correctly.

Jquery has two different functions attr() and prop(). Those two use for different purposes. attr is for all attributes. prop is for properties. In your case dropdown element "selected" is not a attribute. It is a property. Therefore you should use prop function as below.
$("#perm_"+data).prop("selected", true);
Note: However some modern browser works for both, but for cross browser compatibility always try to use correct one.

Why you use options under select you can directly use $("#user_permission").val(1)

How to refresh default display option in select by javascript or jquery?

html code:
<select>
<br>
<option>1</option><br>
<option>2</option><br>
</select>
This select will default display the first option item(display 1).
Now i want to change select to display the second item by jquery when dom is ready, but i tried several times, all failed.The following is my attempt:
$('select').prop('selectIndex', 1);
$('option').eq(1).attr('selected', 'selected');
$('option').eq(1).prop('selected', true);
default set select's style to 'display:none' in html code, then try above three ways and finally invoke $('select').show()
Maybe, i am only setting the dom value, not tell browser to refresh 'select'.
Do you konw the other way to refresh default display option in select?

You have to add values to your options from select.
<select>
<option value="1">First</option>
<option value="2">Second</option>
</select>
Then, just set the value "2".
$("select").val("2");
Or, you can do this simply setting the second value from select.
$("select").val(2);
See the working example here.

This is enough
$("select").val(2);

i think you want to select option 2 when page is load.
<select>
<option>1</option>
<option selected="selected">2</option>
</select>

How to change the jquery mobile flip switch state from code

I have some jQuery Mobile flip toggle switches on my Android/iPad application, and I need to
change their states (on/off) dynamically, using JavaScript.
I was looking for a solution here, (Change value of flip toggle dynamically with jQuery Mobile) and I tried several ways (.val('on'), .slider('enable')...) but it seems the control is not working at all.
Is there a solution for this issue? How can I do to change the flip switch state from code?

I've examined the page you posted and I confirmed that the solution:
$('selector').val('value').slider('refresh');
does indeed work. Make sure that 'selector' is referencing your select element, and that 'value' is a value you defined on the option element you wish to enable.
I confirmed this by visiting http://jquerymobile.com/demos/1.0.1/docs/forms/switch/index.html, then with firebug's console entering the line:
$("#flip-b").val('no').slider('refresh');
It switched the second slider displayed on the page from yes to no.

There are two types of flipswitch, select based and checkbox based.
To set a select based widget, use the .val() construct
$("#myFlip").val("on").flipswitch( "refresh" ) ;
where "on" is one of the option values in the select element.
To set a checkbox based widget, use the .prop() construct:
$("#myFlip").prop( "checked", true ).flipswitch( "refresh" ) ;
where true is either true or false. (Thanks to Jeremy Hill for the hint).
BTW I tried the .flipswitch( "option", "checked", true ) construct with no luck.
Note there is also a slider switch similar to the select based flipswitch.

For JQuery 1.4 or later, if you want to toggle a flip switch dynamically
$("#flip").val('on').flipswitch('refresh');
Make sure that your data-role is flip-switch to make this work.
Good Luck !

Does this work:
http://jsfiddle.net/AYLpe/
JS
var fts = $('#flipMe');
fts.val('on');
fts.slider('refresh');
HTML
<label for="flip-a">Select slider:</label>
<select name="slider" id="flipMe" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>

#Pizano's answer above worked for me.
I, too, was having this problem. In my case, I was missing the all-important ".slider('refresh')"
Cheers,
Steve

I couldn't get the 'flipswitch' part to work, so treating it like a normal checkbox might work for you (this is for jQuery Mobile 1.4.3):
$('input[name="my-flipswitch-name"]').prop('checked', true).trigger('click').trigger('change');

There are two ways to make flipswitches (checkbox-based and select-based), but you can can only dynamically change the state with the select-based method.
Jquery to change state:
$("#mySwitch").val('no').flipswitch('refresh');
Select-based method:
<select name="mySwitch" id="mySwitch" data-role="flipswitch" >
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
Checkbox-based: (can't change state dynamically)
<input type="checkbox" id="mySwitch" data-role="flipswitch">

$("#mySwitch").val('no').flipswitch().flipswitch('refresh');
seems to work, too.

PHP - How to submit a select menu without a button

Is it possible to auto submit a select menu when the selection changes without using a button to submit the form. I have four of these on my page and using a button for each uses up too much space. By Select Menu, I mean:
<select name="something" class="something" title="something something">
<option selected="selected">Option One</option>
<option >Option Two</option>
</select>
I would also like to add a confirm popup for the on change event. The following is what I use for buttons but it does not work for the select menu.
onclick="return confirm('do you haz teh codz?');"
Any link to articles tutorials or examples would be greatly appreciated!
Thanks

This is more appropriately tagged 'javascript' since it's javascript that you'll use to do it.
Add an 'onchange' event to the select. In the example below, 'form' should be substituted for your favourite method of targeting the form node.
<select name="something" class="something" title="something something" onchange="form.submit()">
<option selected="selected">Option One</option>
<option >Option Two</option>
</select>

You need a JavaScript solution, not a PHP solution. PHP can only handle form data after it's been sent to the server; i.e., when the form has been submitted.
You can use JavaScript to:
Add an event listener to the <select> to trigger when it changes (onchange).
When the <select> changes, get its current value.
Based on the value, redirect the user (change window.location) to the page you want them to go to.
Edit: I re-read your question and if you are just looking to submit the form when the user changes the <select>, then mwotton's answer is probably the way to go. (Of course, move the JavaScript away from the HTML; it doesn't belong there.)
For your confirmation, you can do something like this:
document.getElementById('my-select').onchange = function(){
return confirm('do you haz teh codz?');
});
(It's always a good idea to keep your JavaScript away from your HTML. So just give your <select> an ID like id="my-select" and you can access it from the JavaScript. You can also use a JavaScript library like jQuery to greatly ease your JavaScript programming.)

Well, you need to know the form name/id or something. Assuming <form id="selectform"> and <select id="selectelement">,
window.onload=function() {
document.getElementById('selectelement').change = function() {
if(confirm('do you haz teh codz?'))
document.getElementById('selectform').submit();
else
return false;
return true;
}
}
The return false/true will determine whether or not to revert the select back to the original option.
Here's a test: http://jsfiddle.net/yrqcj/2/

You can implement the onchange event for select object and inside the function make a reference to the form.submit();