Develop Reference

jQuery dropdown value change depending on the variable

I have a dropdown
<select class="form-control" id="defectstatus" name="defectstatus">
<option selected="selected" value="Pick One">Select Defect Status</option>
<option value="New">New</option>
<option value="Needs more info">Needs more info</option>
Now I have a variable
a=$("#answer").html();
alert(a);
For which the value of a is
New
What I want to do is something like this
$("#defectstatus").val(a);
Then my dropdown defectstatus will change default selected to New instead of Pick One

As I understand you trying to select the option with the value is (New) you can use
$("#defectstatus > option[value='"+ a +"']").prop('selected' , true);

You try change $("#answer").text(); instead of $("#answer").html();

What you have seems like it works, but I imagine it's possible that your code is executing before the HTML has loaded, and is therefore not finding #answer.
You can wrap your code in $(function(){/*code*/}); to make sure it executes when the document is ready.
(Live example: http://plnkr.co/edit/PMOraMzVsMEg2z3FOeP5?p=preview)

How to alert the selected option using javascript or jquery?

I am using a select tag in my code, here is my code,
<select onchange="test(this);">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
and javascript code is here,
<script>
function test(obj)
{
alert($(obj).val());
}
</script>
I want to alert the selected text here, If I use the above code the value of the selected option is coming, but I want to alert the text of the selected option can anyone tell to achive this one.
I want to alert it without using any class or id.
I want to alert it only through the obj.
I am waiting for your help.
Thanks In advance

This should do the trick...
alert($(obj).find("option:selected").text());
That uses the jQuery object $(obj), like you already had, but does a find() which searches the child elements, in this case the selected option.
jQuery find()
:selected pseudo-selector

Try this..
alert($(obj).find("option:selected").text());

you can try this:
alert($(obj).find('option').eq(obj.value).text());
Working jsFiddle

<select id="someid" onchange="test();">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
javascript>
function test(){
var elem = document.getElementById("someid"),
var selectedNode = elem.options[elem.selectedIndex].text;
alert(selectedNode );
}
jQuery>
$("#someid").change(){
alert($(this).find("option:selected").text());
}

Modify selected property in select option

I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!

You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>

I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);

Save and load background with javascript

This is the code I have on my website: you can see a select with a dropdown list that has a few options. When an option is clicked, a background will be loaded with the onchange() event.
<select id="rds" onchange="bg(this[this.selectedIndex].value);">
<option value="0.png">1. Default</option>
<option value="1.png">2. Collage</option>
<option value="2.jpg">3. Darkness</option>
</select>
And here the bg() function:
function bg(num) {
document.body.style.backgroundImage = "url(http://mk7vrlist.altervista.org/backgrounds/" + num + ")";
}
This works perfectly. I have to save the option that an user selected, so every time he opens the webpage, he can see the background he selected.
I was thinking to save a cookie and load it. Since I saw that it's a bit tricky with javascript, I thought I could use jQuery and so I made this:
<select id="rds" onchange="bg(this[this.selectedIndex].value); $.cookie("example", this[this.selectedIndex].value, {expires: 7});">
<option value="0.png">1. Default</option>
<option value="1.png">2. Collage</option>
<option value="2.jpg">3. Darkness</option>
</select>
The cookie is not saving and Mozilla tells me SyntaxError: syntax error. How could I fix this problem?
I've included the jQuery file in this way:
<script type="text/javascript" src="http://mk7vrlist.altervista.org/jquery-1.10.2.min.js"></script>
How can I load the background once I saved the cookie? I have to call the bg() function but I don't know how to do it.

Firstly, don't use on[event] attributes. They're outdated and make maintenance harder. Instead attach your events in JS. Here's a jQuery example, using $.cookie():
<select id="rds">
<option value="0.png">1. Default</option>
<option value="1.png">2. Collage</option>
<option value="2.jpg">3. Darkness</option>
</select>
var setBackground = function(bgImg) {
$.cookie('bgImg', bgImg);
$('body').css('background-image', 'url(http://mk7vrlist.altervista.org/backgrounds/' + bgImg + ')');
}
$(function() {
// on select change
$('#rds').change(function() {
setBackground($(this).val());
});
// on load
setBackground($.cookie('bgImg'));
});

Your syntax error is here:
<select id="rds" onchange="bg(this[this.selectedIndex].value); $.cookie("example", this[this.selectedIndex].value, {expires: 7});">
You should write this:
<select id="rds" onchange="bg(this[this.selectedIndex].value); $.cookie('example', this[this.selectedIndex].value, {expires: 7});">
Note the simple quote around 'example'. On your example, you used double quotes that were interfering with the double quotes of the html attribute.

Your syntax error is because you don't escape the quotes in the onchange event, change it to this:
<select id="rds" onchange="bg(this[this.selectedIndex].value); $.cookie('example', this[this.selectedIndex].value, {expires: 7});">
<option value="0.png">1. Default</option>
<option value="1.png">2. Collage</option>
<option value="2.jpg">3. Darkness</option>
</select>
To load the background use the solution of the other answers :).

Javascript: Change <select ..> options from java script

I have a form which looks like below, where the user can select multiple options. I am trying to do the same thing (when the page regenerates) from javascript. I am not sure where I am going wrong. Could someone correct me?
<form name="myForm">
<select name="numSel[]" size="2" multiple="multiple">
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option value="THREE">THREE</option>
<option value="FOUR">FOUR</option>
</select>
</form>
This is the javascript code that I am trying (trying to select ONE and THREE):
document.myForm.numSel.options[1].selected = true;
document.myForm.numSel.options[3].selected = true;
Any ideas?
Edit: Syntax corrected (not actually in the code). I intend to generate the javascript statements in PHP and the numSel[] is needed for it to work. So, in this scenario, how do I change the code?
Thanks.

Change your JS code this way:
document.forms["myForm"].elements["numSel[]"].options[1].selected = true;
document.forms["myForm"].elements["numSel[]"].options[3].selected = true;
And correct the closing tag </select>.

name="numSel[]" does not match the name in your script. Change that to just numSel and it works:
<select name="numSel" size="2" multiple="multiple">
http://jsfiddle.net/m5GJW/
.. or alternatively target it by the name "numSel[]"
document.myForm["numSel[]"].options[1].selected = true;
document.myForm["numSel[]"].options[3].selected = true;​
http://jsfiddle.net/x3rGb/