Results 1 to 2 of 2
  1. #1
    Join Date
    Mar 2004

    Unanswered: Two dependent comboboxes - simple solution

    For example, first combo has more general data - countries, second has data about cities, when first is SELECTed, second has to be populated based on the SELECTed row from the first, cities from the country user chooses. Both combos are populated from database tables.

    Is there any simple solution? The first combo should trigger the second one to be refreshed.

    Any ideas??! I found lot of different stuff at Internet.

  2. #2
    Join Date
    Mar 2006
    south jersey, usa
    here's a triple combo. maybe you can trim it down

    <FORM name="isc">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr align="center"> 
        <td nowrap height="11"> &nbsp;
    <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option selected>---Select1-------------</option>
    <option>Webmaster Sites</option>
    <option>News Sites</option>
    <select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
    <option value=" " selected> </option>
    <option value=" " selected>---Select2--------------</option>
    <option value=" " selected>---Select2--------------</option>
    <select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
    <option value=" " selected> </option>
    <option value=" " selected>---Select3----------------</option>
    <option value=" " selected>---Select3----------------</option>
    Triple Combo Script Credit
    By Hamid Cheheltani/ JavaScript Kit (
    Visit for this and over 400+ other scripts
    var groups=document.isc.example.options.length
    var group=new Array(groups)
    for (i=0; i<groups; i++)
    group[i]=new Array()
    group[0][0]=new Option("---Select2---"," ");
    group[1][0]=new Option("Now Select This One"," ");
    group[1][1]=new Option("JavaScript","47");
    group[1][2]=new Option("DHTML","46");
    group[1][3]=new Option("CGI","45");
    group[2][0]=new Option("Now Select This One"," ");
    group[2][1]=new Option("General News","115");
    group[2][2]=new Option("Technology News","116"); 
    var temp=document.isc.stage2
    function redirect(x){
    for (m=temp.options.length-1;m>0;m--)
    for (i=0;i<group[x].length;i++){
    temp.options[i]=new Option(group[x][i].text,group[x][i].value)
    var secondGroups=document.isc.stage2.options.length
    var secondGroup=new Array(groups)
    for (i=0; i<groups; i++)  {
    secondGroup[i]=new Array(group[i].length)
    for (j=0; j<group[i].length; j++)  {
    secondGroup[i][j]=new Array()  }}
    secondGroup[0][0][0]=new Option("---Select 3---"," ");
    secondGroup[1][0][0]=new Option("---Select 3---"," ");
    secondGroup[1][1][0]=new Option("Now Select This One"," ");
    secondGroup[1][1][1]=new Option("JavaScript Kit","");
    secondGroup[1][1][2]=new Option("JavaScript for the non programmer","");
    secondGroup[1][1][3]=new Option("","");
    secondGroup[1][2][0]=new Option("Now Select This One"," ");
    secondGroup[1][2][1]=new Option("Dynamic Drive","");
    secondGroup[1][2][2]=new Option("Beginner\'s Guide to DHTML","");
    secondGroup[1][2][3]=new Option("Web Coder","");
    secondGroup[1][3][0]=new Option("Now Select This One"," ");
    secondGroup[1][3][1]=new Option("CGI Resources","");
    secondGroup[1][3][2]=new Option("Ada\'s Intro to CGI","");
    secondGroup[2][0][0]=new Option("---Select 3---"," ");
    secondGroup[2][1][0]=new Option("Now Select This One"," ");
    secondGroup[2][1][1]=new Option("CNN","");
    secondGroup[2][1][2]=new Option("MSNBC","");
    secondGroup[2][1][3]=new Option("ABC News","");
    secondGroup[2][2][0]=new Option("Now Select A Page"," ");
    secondGroup[2][2][1]=new Option("","");
    secondGroup[2][2][2]=new Option("Wired","");
    var temp1=document.isc.stage3
    function redirect1(y){
    for (m=temp1.options.length-1;m>0;m--)
    for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
    temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
    function redirect2(z){
    <p><font face="arial" size="-2">This free script provided by</font><br>
    <font face="arial, helvetica" size="-2"><a href="">JavaScript
    "They say Moses split the Red Sea
    I split the blunt and rolled the fat one, I'm deadly"
    -- Tupac 'Blasphemy'

Posting Permissions

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