...

View Full Version : Populating a combo box from array?



calavera
03-23-2005, 04:44 PM
Hi,

I've got this array containg several values for each entry, and what I am trying to do is populate the combo box with just the animal names. However I'm not sure how to do this. I've pasted what I've got so far below, can anyone give me some advice how to achieve this?

Thanks,
Cal

<html>
<head>

<script>

function type(animalID, AnimalType, age, weight){
this.animalID=animalID;
this.AnimalType=AnimalType;
this.age=age;
this.weight=weight;
}

animals = new Array()
//mediatype[0] = new type(animalID, AnimalType, age, weight);
animals[0] = new type(1, "Cat", 14, 12.3);
animals[1] = new type(2, "Dog", 16, 23.6);
animals[2] = new type(3, "Elephant", 56, 450);
animals[3] = new type(4, "Parrot",7, 4.3);


</script>

</head>
<body>
<form name="myform">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11"> &nbsp;

<select name="input4" id="input4" size="1" onLoad="javascript:Combo()">
</select>
</fieldset>
</td>
</tr>
</table>
</form>
</body>
</html>

eric6930
03-23-2005, 05:05 PM
Here is your combo function, calavera

function Combo (){
for(var i=0; i<animals.length; i++){
document.myform.input4.options[i] =new Option(animals[i].AnimalType);
}
}

An Option object creates an option for a select tag. Each member of the animals array represents a type object that is created earlier. If you know it, it's easy to get a reference to each property of the type object.

But the actual onLoad function should be attached to the body tag, and not the select tag.

calavera
03-23-2005, 05:35 PM
Excellent! I must have been trying to get this work for over an hr :eek:

Thks!!
Cal.

calavera
03-23-2005, 05:50 PM
Just realised I forgot to ask :D

As you can see in my animals array they each have an age, how can I display this age in an alert box when one has been selected?

Thks,
Cal.

eric6930
03-23-2005, 06:10 PM
If you need to show the age, you need to modify the Combo function as follows:

function Combo (){
for(var i=0; i<animals.length; i++){
document.myform.input4.options[i] =new Option(animals[i].AnimalType, animals[i].age);
}
}
When you create a new Option with 2 arguments, the first argument is the option text, and the second one is the value.

Now, attach the following function to the onChange event of the select:

function OnChange(){
for(var i=0; i< document.myform.input4.length; i++){
if(document.myform.input4.options[i].selected)
alert (document.myform.input4.options[i].value);
}
}

calavera
03-24-2005, 03:21 PM
Excellent that works perfect. I made a slight alteration as I am trying to understand better for myself how I fecth data and store it in values, so age is stored in var:input1, as I have in mind at some point to display these values in a form output.

I've been trying work with your example of getting the age value but at the same time get the weight value and store this in another var:input2. I'm failing misserable, everything I tried either blanks my combo list, overlaps the age data with weight data, I just can't seem to retrieve more than one amount of data and store these in seperate variables without totally messing it up :confused:

Any adivice would be appreciated! :)
Thks,
Cal


<script>
function type(animalID, AnimalType, age, weight){
this.animalID=animalID;
this.AnimalType=AnimalType;
this.age=age;
this.weight=weight;
}

animals = new Array()
//mediatype[0] = new type(animalID, AnimalType, age, weight);
animals[0] = new type(0, "select media", 0, 0);
animals[1] = new type(1, "Cat", 14, 12.3);
animals[2] = new type(2, "Dog", 16, 23.6);
animals[3] = new type(3, "Elephant", 56, 450);
animals[4] = new type(4, "Parrot",7, 4.3);


//list combo + get age value
function Combo(){
for(var i=0; i<animals.length; i++){
document.myform.input4.options[i] =new Option(animals[i].AnimalType, animals[i].age);
}
}

//update age value on change
//store this value in input1
function Change(){
for(var i=0; i< document.myform.input4.length; i++){
if(document.myform.input4.options[i].selected){
input1 = document.myform.input4.options[i].value;
//check input1 (age)
alert(input1);
}
}
}
</script>

calavera
03-24-2005, 04:26 PM
soloution to this... :D

function Change(){
input1 = animals[document.myform.input4.selectedIndex].age
input2 = animals[document.myform.input4.selectedIndex].weight
alert(input1);
alert(input2);
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum