Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2003
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Populating a combo box from array?

    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>

  • #2
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New Coder
    Join Date
    Apr 2003
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excellent! I must have been trying to get this work for over an hr

    Thks!!
    Cal.

  • #4
    New Coder
    Join Date
    Apr 2003
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question oops

    Just realised I forgot to ask

    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.

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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);
    }
    }

  • #6
    New Coder
    Join Date
    Apr 2003
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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

    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>

  • #7
    New Coder
    Join Date
    Apr 2003
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    soloution to this...

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •