How to loop the chain select box

how to loop the form, so that there would be a multiple select boxes…
here is the problem if i loop the form only…

i want to have an output like this…

here is my code…

<form action="" method="post" name="form1">
<select name="college" id="college" onChange="selected(this.selectedIndex)">
  <option value="0" selected>Select college..</option>
  <option value="1">Engineering</option>
  <option value="2">Business Administration</option>
  <option value="3">Arts and Science</option>
  <option value="4">Fine Arts</option>
</select>              
<select name="course" id="course">
  <option value="0" selected>Select course..</option>
</select>  
</form>
 
<script type="text/javascript">

    var colleges=document.form1.college
    var courses1=document.form1.course
    
    var course=new Array()
		
    course[0]=['Select course..']    
    course[1]=['CE','COE','EE','ECE','IE','ME','CS','IS','IT']    
    course[2]=['BSA-CAS','BSA','BSBA-FM','BSBA-BEC','BSBA-MGE','BSBA-MKM','BSBA-MA','BSENT']    
    course[3]=['AB-Comm Arts','Tourism','HRM', 'Sec. Mgt.']
	course[4]=['BFA','BFA-Int Design','BFA-Painting','BID']
    
    function selected(collgrp){                
        courses1.options.length=0                    
        if(collgrp >= 0){
			
            for(i=0; i<course[collgrp].length; i++){
            courses1.options[courses1.options.length]=new Option(course[collgrp][i])
        }
    }
    }
	
</script>