Simple JavaScript Array and Drop Down Box Problem... [Archive]

WearDark

August 30th, 2007, 04:02 PM

Im just learning javascript and I want to populate a drop down box with values from an array.... using what I've read, I've pieced this together:

<html>
<head>

<script type="text/javascript">

var arr = new Array()
arr[0]="Cat";
arr[1]="Dog";
arr[2]="Horse";

for (i=0;i<arr.length;i++)
{
document.write(arr[i]);
document.f1.list.options[document.f1.list.options.length] = new Option(arr[i]);
}

</script>

</head>
<body>

<form name="f1">
<select name="list">
</select>
</form>

</body>
</html>

But I cant get any result... can anyone tell me where Ive gone wrong?

Cheers.

Shard

August 31st, 2007, 02:07 AM

Im just learning javascript and I want to populate a drop down box with values from an array.... using what I've read, I've pieced this together:

<html>
<head>

<script type="text/javascript">

var arr = new Array()
arr[0]="Cat";
arr[1]="Dog";
arr[2]="Horse";

for (i=0;i<arr.length;i++)
{
document.write(arr[i]);
document.f1.list.options[document.f1.list.options.length] = new Option(arr[i]);
}

</script>

</head>
<body>

<form name="f1">
<select name="list">
</select>
</form>

</body>
</html>

But I cant get any result... can anyone tell me where Ive gone wrong?

Cheers.

why not just write ... document.write('<option value="">'+ i + '</option>'); ?

WearDark

September 1st, 2007, 11:38 AM

I suppose I could go that route but it just doesn't seem like a very elegant solution....

Here's another example I found that based on what I've read should work, but I cannot get any results from it...

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

function addOption_list(){

var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

for (var i=0; i < months.length;++i){
addOption(document.list.month, months[i], months[i]);
}
}
function addOption(selectbox,text,value ){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}

</script>
</head>
<html>

<body onLoad="appOption_list()">

<FORM name="list">
<SELECT name="month">
<option>Month list</option>
</SELECT>
</FORM>

<body>
</html>

Does anyone have any ideas?

Surrogate

September 1st, 2007, 01:30 PM

Im just learning javascript and I want to populate a drop down box with values from an array.... using what I've read, I've pieced this together:

<html>
<head>

<script type="text/javascript">

var arr = new Array()
arr[0]="Cat";
arr[1]="Dog";
arr[2]="Horse";

for (i=0;i<arr.length;i++)
{
document.write(arr[i]);
document.f1.list.options[document.f1.list.options.length] = new Option(arr[i]);
}

</script>

</head>
<body>

<form name="f1">
<select name="list">
</select>
</form>

</body>
</html>

But I cant get any result... can anyone tell me where Ive gone wrong?

Cheers.

Use standard compliant DOM instead of that old stuff.

<html>
<head>

<script type="text/javascript">
window.onload = function() {
var AnimalArray = new Array();
AnimalArray[0] = "Cat";
AnimalArray[1] = "Dog";
AnimalArray[2] = "Horse";
var Animals = document.getElementById("Animals");
for (i=0;i<AnimalArray.length;i++)
{
var Entry = document.createElement("option");
Entry.text = AnimalArray[i];
Animals.add(Entry ,null);
}
}
</script>

</head>
<body>

<form>
<select id="Animals">
</select>
</form>

</body>
</html>

Read up on it on :
http://www.w3schools.com/js/js_obj_array.asp (The programming aspect)
http://www.w3schools.com/htmldom/default.asp (The HTML objects you can use the JS to modify)

WearDark

September 1st, 2007, 02:14 PM

Works.

Cheers!