Web Analytics Made Easy -
StatCounter dynamically add select box options - CodingForum

Announcement

Collapse
No announcement yet.

dynamically add select box options

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • dynamically add select box options

    Hi, I've been trying to write some code to dynamically add a list of options to a 'select' form item. The code below doesn't work, though, and I believe it's because "newArray" would not be defined when calling the function.

    It is in the "head" section of the page, and I call the jsfun() function in the select box onFocus event. Also, the name of the form is "testform" and the name of the select box is "myselect". I'm confident I've created the array correctly,



    <script type="text/javascript">

    function jsfun(filesArray) {
    for (index=0;index<filesArray.length;index++) {
    var option = new Option(filesArray[index],index);
    document.testform.myselect.options.add(option,index);
    }
    }

    var newArray = new Array(4)
    newArray[0] = "item1";
    newArray[1] = "item2";
    newArray[2] = "item3";
    newArray[3] = "item4";

    </script>




    I call the jsfun() function in the following way:

    <select name="myselect" size=15 onFocus="jsfun(newArray)">

    I do see a problem, and that is that "newArray" above would not be defined. I need some way to access the array called "newArray" in the header section of the html, so that the "newArray" argument in calling the function knows what to pass on to the function.

    Any ideas? Thanks!

  • #2
    This should get you started:
    Code:
    <script type="text/javascript">
     <!--//
      function loadOptions(which){
        var theOptions = document.form1.menu; // FORM NAME //;
        var main = new Array();
            main[0]=new Option('Pick A Subject','default');
            main[1]=new Option('Animals','animals');
            main[2]=new Option('Cars','cars');
    
        var animals = new Array();
            animals[0]=new Option('Pick An Animal','default');
            animals[1]=new Option('Cats','cats');
            animals[2]=new Option('Dogs','dogs');
            animals[3]=new Option('Pigs','pigs');
            animals[4]=new Option('Return To Main Menu','main');
    
        var cars = new Array();
            cars[0]=new Option('Pick A Car','default');
            cars[1]=new Option('Buick','buick');
            cars[2]=new Option('Chevy','chevy');
            cars[3]=new Option('Olds','olds');
            cars[4]=new Option('Return To Main Menu','main');
    
       if(which.toLowerCase() == 'main')    {myOptions = main};
       if(which.toLowerCase() == 'animals') {myOptions = animals};
       if(which.toLowerCase() == 'cars')    {myOptions = cars};
    
         for(j=theOptions.length; j>myOptions.length-1; j--){
           if(theOptions.length > myOptions.length){
              for(i=0; i<myOptions.length; i++){
                  theOptions[i] = myOptions[i];
                  theOptions[j] = null;
              }
           }
         }
    
           if(myOptions.length > theOptions.length){
             for(i=0; i<myOptions.length; i++){
                 theOptions[i] = myOptions[i];
             }
           }
    
      }
     //-->
    </script>
    </HEAD>
    
    
    
    
    
    
    <BODY onload="loadOptions('main')">
    <form name="form1">
    <select name="menu" onchange="loadOptions(this[this.selectedIndex].value)"></select>
    .....Willy

    Comment

    Working...
    X