Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 372
  • Last Modified:

Reuse of Populated Dropdown

I am using the function below to generate a drop down list.  My problem is that I am trying to reuse the list 3 times on the same page, but the list will not populate after the first. Any help would be appreciated. Thanks

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT>
function populate()
{
     var selectBox2 = document.getElementById('selectBox2');
     for( i = 0; selectBox2.length > 0; i++ )
     {
          selectBox2.options[i] = null;
          if( selectBox2.length > 0 )
               selectBox2.length--;
     }
     
     if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "admin" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );       
          selectBox2.options[1] = new Option( 'Financial Services', 'Financial Services' );

            if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }
     if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "adult" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );       
          selectBox2.options[1] = new Option( 'www', 'www' );
                             
            if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }      
     if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "fss" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );       
          selectBox2.options[1] = new Option( 'Offices', 'Offices' );
          selectBox2.options[2] = new Option( 'Operations', 'Operations' );
          selectBox2.options[3] = new Option( 'Program', 'Program' );                              
            if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }              
      if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "cfs" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );       
          selectBox2.options[1] = new Option( 'ddd', 'ddd' );
          selectBox2.options[2] = new Option( 'aaa', 'aaa' );
          selectBox2.options[3] = new Option( 'bbb', 'bbb' );
   
              if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }       
 
     else
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );       
          selectBox2.options[1] = new Option( 'nnn', 'nnn' );
          selectBox2.options[2] = new Option( 'nnn', 'nnn' );
            if( document.getElementById('selectBox3').style.display != 'block' )
               document.getElementById('selectBox3').style.display = 'block';
     }
}
</SCRIPT>
</head>

<body>
<table><tr>
<td><br>
<select name="div1" class="text" ID="selectBox1" onChange="populate();">
<option value="0">Select Division</option>
<option value="admin">Administrative Services</option>
<option value="adult">Adult Services</option>
<option value="assist">Assistance Programs</option>
<option value="cfs">Children and Family Services</option>
<option value="fss">Family Self Sufficiency</option>
</select>
</td>
<td bgcolor="#FFFFFF"><select name="program1" ID="selectBox2">
<option value="0">Select Organization</option>
</select>
</td>
</tr></table>
</body>
</html>
0
rayne101
Asked:
rayne101
1 Solution
 
BatalfCommented:
Try


function populate()
{
     var selectBox2 = document.getElementById('selectBox2');
     selectBox2.options.length=0;
     
     if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "admin" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox2.options[1] = new Option( 'Financial Services', 'Financial Services' );

            if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }
     if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "adult" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox2.options[1] = new Option( 'www', 'www' );
                         
            if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }    
     if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "fss" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox2.options[1] = new Option( 'Offices', 'Offices' );
          selectBox2.options[2] = new Option( 'Operations', 'Operations' );
          selectBox2.options[3] = new Option( 'Program', 'Program' );                          
            if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }            
      if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "cfs" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox2.options[1] = new Option( 'ddd', 'ddd' );
          selectBox2.options[2] = new Option( 'aaa', 'aaa' );
          selectBox2.options[3] = new Option( 'bbb', 'bbb' );
   
             if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }      
 
     else
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox2.options[1] = new Option( 'nnn', 'nnn' );
          selectBox2.options[2] = new Option( 'nnn', 'nnn' );
            if( document.getElementById('selectBox3').style.display != 'block' )
               document.getElementById('selectBox3').style.display = 'block';
     }
}
0
 
rayne101Author Commented:
Tried the code and it didn't work.  
0
 
davlun20080Commented:
Is this what you are looking for??


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT>
function populate()
{
     var selectBox2 = document.getElementById('selectBox2');
     for( i = 0; selectBox2.length > 0; i++ )
     {
          selectBox2.options[i] = null;
          if( selectBox2.length > 0 )
               selectBox2.length--;
     }
     
     if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "admin" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox2.options[1] = new Option( 'Financial Services', 'Financial Services' );

            if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }
     if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "adult" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox2.options[1] = new Option( 'www', 'www' );
                         
            if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }    
     if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "fss" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox2.options[1] = new Option( 'Offices', 'Offices' );
          selectBox2.options[2] = new Option( 'Operations', 'Operations' );
          selectBox2.options[3] = new Option( 'Program', 'Program' );                          
            if( document.getElementById('selectBox3').style.display != 'none' )
               document.getElementById('selectBox3').style.display = 'none';
     }            
      if( document.getElementById('selectBox1').options[document.getElementById('selectBox1').selectedIndex].value == "cfs" )
     {
          selectBox2.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox2.options[1] = new Option( 'ddd', 'ddd' );
          selectBox2.options[2] = new Option( 'aaa', 'aaa' );
          selectBox2.options[3] = new Option( 'bbb', 'bbb' );
   

              selectBox3.options[0] = new Option( 'Select Program/Unit', '0' );      
          selectBox3.options[1] = new Option( 'nnn', 'nnn' );
          selectBox3.options[2] = new Option( 'nnn', 'nnn' );
         
              if( document.getElementById('selectBox3').style.display != 'block' )
               document.getElementById('selectBox3').style.display = 'block';

     }
}
</SCRIPT>
</head>

<body>
<table><tr>
<td><br>
<select name="div1" class="text" ID="selectBox1" onChange="populate();">
<option value="0">Select Division</option>
<option value="admin">Administrative Services</option>
<option value="adult">Adult Services</option>
<option value="assist">Assistance Programs</option>
<option value="cfs">Children and Family Services</option>
<option value="fss">Family Self Sufficiency</option>
</select>
</td>
<td bgcolor="#FFFFFF"><select name="program1" ID="selectBox2">
<option value="0">Select Organization</option>
</select></td><td bgcolor="#FFFFFF"><select name="program2" ID="selectBox3">
<option value="0">Select Organization</option>
</select>
</td>
</tr></table>
</body>
</html>
0
 
ZvonkoSystems architectCommented:
Here a tested and working code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT>
var aOpt = new Array();
aOpt["admin"] = [
['Select Program/Unit', '0' ],
['Financial Services', 'Financial Services']];
aOpt["adult"] = [
['Select Program/Unit', '0'],
['www', 'www']];
aOpt["assist"] = [
['Select Program/Unit', '0'],
['nnn', 'nnn'],
['nnn', 'nnn']];
aOpt["cfs"] = [
['Select Program/Unit', '0'],
['Offices', 'Offices'],
['Operations', 'Operations'],
['Program', 'Program']];
aOpt["fss"] = [
['Select Program/Unit', '0'],
['ddd', 'ddd'],
['aaa', 'aaa'],
['bbb', 'bbb']];


function populate(theSel){
    var theForm = theSel.form;
    theForm.selectBox3.style.display = "none";
    var opt = theForm.selectBox2.options;
    opt.length = 0;
    var newOpt = aOpt[theSel.value];
    for(var i=0;i<newOpt.length;i++){
      opt[i] = new Option(newOpt[i][0],newOpt[i][1]);
    }
}
</SCRIPT>
</head>
<body>
<form>
<table><tr>
<td>
<select name="div1" class="text" ID="selectBox1" onChange="populate(this);">
<option value="0">Select Division</option>
<option value="admin">Administrative Services</option>
<option value="adult">Adult Services</option>
<option value="assist">Assistance Programs</option>
<option value="cfs">Children and Family Services</option>
<option value="fss">Family Self Sufficiency</option>
</select>
</td>
<td bgcolor="#FFFFFF"><select name="program1" ID="selectBox2" name="selectBox2">
<option value="0">Select Organization</option>
</select>
</td>
<td bgcolor="#FFFFFF"><select name="program2" ID="selectBox3" name="selectBox3" style="display:none">
<option value="0">Select Organization</option>
</select>
</td>
</tr></table>
<input type=submit>
</form>
</body>
</html>


0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now