Set selected item in Dropdown 2

[dsardone]

I have been trying, unsuccessfully, to have a dropdown list default to a specific option. In this case the dropdown is a list of months and I want the current month to be the selected item. I have tried to select the correct option via the:

document.getElementById("listID").selectedIndex

but it does not work. Any Ideas?

 

[vicvirk]

something like this:?

<select id="dlMonth">
	<option value="1">Jan</option>
	<option value="2">Feb</option>
	<option value="3">Mar</option>
	<option value="4">Apr</option>
	<option value="5">May</option>
	<option value="6">Jun</option>
	<option value="7">Jul</option>
	<option value="8">Aug</option>
	<option value="9">Sep</option>
	<option value="10">Oct</option>
	<option value="11">Nov</option>
	<option value="12">Dec</option>
</select>

<script language="javascript">
		var x = new Date();
		var m = x.getMonth();
		document.getElementById("dlMonth").getElementsByTagName("option")[m].selected = "selected";
</script>

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[kaht]

document.getElementById("dlMonth").[!]getElementsByTagName("option")[/!][m].selected = "selected";

If you want to cut out a call to the getElementsByTagName, you can use the native options reference which should perform slightly better, although in this instance you likely won't notice any difference:

document.getElementById("dlMonth").[!]options[/!][m].selected = "selected";

-kaht

http://www.lessthandot.com

 

[feherke]

Hi

Just to answer the original question :

I have tried to select the correct option via the:

document.getElementById("listID").selectedIndex

but it does not work. Any Ideas?

We can have no idea without seeing your code. So far the chunk you posted is correct. Based on vicvirk's code, your code was at [highlight]two[/highlight] characters from the success :

[b]var[/b] x [teal]=[/teal] [b]new[/b] Date[teal]();[/teal]
[b]var[/b] m [teal]=[/teal] x[teal].[/teal]getMonth[teal]();[/teal]
document[teal].[/teal]getElementById[teal]([/teal][green][i]"dlMonth"[/i][/green][teal]).[/teal]selectedIndex[highlight][teal]=[/teal]m[/highlight][teal];[/teal]

Feherke.

http://rootshell.be/~feherke/

 

[dsardone]

You guys are fantastic. Thanks so much!!

 

[vicvirk]

kaht & feherke,

I don't want to confuse the requestor by posting this, but I'm going to post it anyway...

I wrote that little snippit and it works, but I am a little confused as to how it works...

My assumption has always been that the getElement(s)By... method returned the objects in a 0-based array, so when you have this (and let's assume it's February right now...

<select id="dlMonth">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
...
</select>

If you want to select option[2], should it not select March - i.e. Jan is 0, Feb is 1 and Mar is 2 ???

That is how I originally had it code, but it was selecting the previous month, so I took out the "-1" and it worked.

 document.getElementById("dlMonth").getElementsByTagName("option")[parseInt(m)-1].selected = "selected";

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[kaht]

vicvirk, I'm sorry I missed your addendum to this thread. I do not frequent these forums near as much as I used to.

Regarding your question, javascript arrays are definitely 0-based. Since I don't have your code that was causing confusion, I can't say exactly what the issue was that you encountered. However, what I can do is provide you with a working example that shows the 0-based reference working as intended:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>This is a test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

window.onload = function () {
   var s = document.getElementById("s").getElementsByTagName("option");
   for (var i = 0, sLen = s.length, out = []; i < sLen; i++) {
      out.push("s[" + i + "] holds an option with a value of \"" + s[i].value + "\" and text of \"" + s[i].text + "\"");
   }
   document.getElementById("d").innerHTML = out.join("<br />");
};

</script>
</head>
 
<body>
   <select id="s">
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
   </select>
   <div id="d"></div>
</body>
</html>

-kaht

http://www.lessthandot.com