Javascript - set "selected" for SELECT

GumbyNoTalent · 25th February 2008, 3:05 PM

simple question...

Select

HTML Code:

<html>
<body>

<form action="">
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected>Fiat</option>
  <option value="audi">Audi</option>
</select>
</form>

</body>
</html>

Now I want to write a script that will allow me to change the default/selected element, using javascript.

Why? So that when I recall the page/template I can set the value without having to embed PHP logic into the form.

SOLVED

HTML Code:

<html>
<body>
<script type="text/javascript">

function setSelectedValue(formObj, newValue) {
	if(!formObj)
		return;
	var objLength = formObj.length;
	if(objLength == undefined) {
		formObj.selected = (formObj.value == newValue.toString());
		return;
	}
	for(var i = 0; i < objLength; i++) {
		formObj[i].selected = false;
		if(formObj[i].value == newValue.toString()) {
			formObj[i].selected = true;
		}
	}
}
//-->
</script>
</head>

<body>
<form id="test" name="test" action="test">
<select name="cars">
  <option value="">--- Select One ---</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
</form>
<script>setSelectedValue(document.forms['test'].elements['cars'], 'saab');</script>
</body>

</html>

bazzawhut · 25th February 2008, 10:03 PM

I was just about to reply when I saw "SOLVED"

For those of you playing along at home, setAttribute('attribute','value') is probably easier.

GumbyNoTalent · 26th February 2008, 12:53 AM

Quote:

Originally Posted by bazzawhut

For those of you playing along at home, setAttribute('attribute','value') is probably easier.

Please explain!

bazzawhut · 28th February 2008, 11:26 PM

I havn't tried this locally so I don't know whether the selected works, but the setAttribute command allows you to set an attribute (duh) of an element with the value in the second paramater.

Say you want to set the text to be red and various other things.
Sure you can go:

Code:

var mySpan = document.getElementById("someSpan");
mySpan.className="someCssSelector";

And then put all the stuff in the stylesheet, but if you're using it as a one off instance, you could just go like:

Code:

var mySpan = document.getElementById("someSpan");
mySpan.setAttribute("style","font-weight:bold;color:red;text-decoration:underline;");

And that will output:

Code:

<span id="someSpan" style="font-weight:bold;color:red;text-decoration:underline;">

Generally you use the setAttribute command to append an attribute to the actual element, and more specifically when the attribute doesn't have a javascript equivilant. So if you say element.selected=true doesnt work, you could just setAttribute("selected","true").

Havn't tried it with selected though, but a very handy expression

28th February 2008, 11:26 PM	#4
bazzawhut Member Join Date: Sep 2007 Posts: 36	I havn't tried this locally so I don't know whether the selected works, but the setAttribute command allows you to set an attribute (duh) of an element with the value in the second paramater. Say you want to set the text to be red and various other things. Sure you can go: Code: var mySpan = document.getElementById("someSpan"); mySpan.className="someCssSelector"; And then put all the stuff in the stylesheet, but if you're using it as a one off instance, you could just go like: Code: var mySpan = document.getElementById("someSpan"); mySpan.setAttribute("style","font-weight:bold;color:red;text-decoration:underline;"); And that will output: Code: <span id="someSpan" style="font-weight:bold;color:red;text-decoration:underline;"> Generally you use the setAttribute command to append an attribute to the actual element, and more specifically when the attribute doesn't have a javascript equivilant. So if you say element.selected=true doesnt work, you could just setAttribute("selected","true"). Havn't tried it with selected though, but a very handy expression

25th February 2008, 10:03 PM	#2
bazzawhut Member Join Date: Sep 2007 Posts: 36	I was just about to reply when I saw "SOLVED" For those of you playing along at home, setAttribute('attribute','value') is probably easier.