Create select options using javascript?

**fedude1993** · 04-04-2009 08:07 AM

I have a form that uses <select> tag that drops down a list of teams. I also have an array of 32 teams that I would like to use to populate this list dynamically. Can someone point me in the right direction?

Here is my array:
var teamArray = new Array ();
teamArray[0] = "Select Team";
teamArray[1] = "Smith-Woods";
teamArray[2] = "Jones-Ebert";
teamArray[3] = "Bohme-Quester";

And here is my select code:
<select name="team" onchange="getScorecard(this)">
<option value="" selected>Select a team</option>
<option value="1">Smith-Woods</option>
<option value="2">Jones-Ebert</option>
<option value="3">Bohme-Quester</option>
</select>

I assume I need to replace the <option value> code with a div that is then populated by a function. But I'm not sure how to write the html to the div tag from a function.

**JMRKER** · 04-04-2009 08:36 AM

This uses a radio button to select the list to populate with, but should be fairly easy to modify to read your dynamic list.

See post #4 of http://www.webdeveloper.com/forum/sh...=populate+drop

**fedude1993** · 04-04-2009 09:17 AM

Thanks JMRKER, I tried, but I can't seem to follow the thread you sent. I think the template tags are too much for me.

I really have 2 questions for the group. I believe I created the array fine, but I don't know how to do 2 things:

1) Write the option list from a function. Here is my feeble attempt at the writing function:

function populateList() {
var arLen=teamArray.length;
var newlist = "";
for ( var i=1, len=arLen; i<len; ++i ){
newList = newlist + '<option value="' + i + '">' + teamArray[i]+'</option>';
}
document.getElementById('optionDiv').innerHTML = newList;
}

And here is my HTML:
<select name="team" onchange="getScorecard(this)">
<option value="" selected>Select a team</option>
<div id="optionDiv"></div>
</select>

2) The second question I have is how do I execute the function to load the list. I assumed this needs to be done on page load. I've tried all of the following:

1) <body onload="populateList();">
2) Within the <head> tag: <script type="text/javascript">_spBodyOnLoadFunctionNames.push("populateList"); </script>
3) Within the <form> tag: <script language="javascript"> window.onload = populateList; </script>

**Fang** · 04-04-2009 09:33 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
function populateList() {
var teamArray = ["Select a Team", "Smith-Woods", "Jones-Ebert", "Bohme-Quester"];
var arLen=teamArray.length;
for(var i=0; i<arLen; i++){
    document.form1.team.options[i]=new Option(teamArray[i], i);
    }
}

window.onload=populateList;
</script>

<style type="text/css">
</style>

</head>
<body>
<form action="#" method="" name="form1">
<div>
<select name="team" onchange="getScorecard(this)">
</select>
</div>
</form>
</body>
</html>

**fedude1993** · 04-04-2009 10:12 AM

Thanks Fang. This is really good.

I never would have gotten here. You don't want to know the direction I was going off into..... Obviously, I need to understand the DOM a lot better.

Mucho Thanks!

Thread: Create select options using javascript?

Thread Tools

Display

Create select options using javascript?

Still Confused

Wow!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions