?
Solved

Reuse of Populated Dropdown

Posted on 2005-03-08
4
Medium Priority
?
370 Views
Last Modified: 2008-03-17
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
Comment
Question by:rayne101
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13492004
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
 

Author Comment

by:rayne101
ID: 13492123
Tried the code and it didn't work.  
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 13493786
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 13494300
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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question