populate and set selected index for selectbox

i have a 2 select boxes

1 selectbox for the "country"
1 selectbox for the "county"

when user selects a country, the second selectbox is populated with that countries countys

this all works fine and after the user submits the form, the values are inserted into a DB. no problems so far.

i have another page that pulls the values from the DB into a form again so the user can edit the value.

what im want is to populate the 2 select boxes with the all the countries and countys again and set the selected index to the values got from the DB.

i have set the 1st select box Country/County to Scotland/Aberdeen as default

here is my .js page

var county = new Array("Aberdeen","Aberdeenshire","Angus","Argyll and Bute","Ayrshire","Clackmannanshire","Dumfries and Galloway","Dunbartonshire","Dundee","East Lothian","Edinburgh","Falkirk","Fife","Glasgow","Highland","Inverclyde","Lanarkshire","Midlothian","Moray","Orkney","Perth and Kinross","Renfrewshire","Scottish Borders","Shetland","Stirling","West Lothian","Western Isles")

var country = new Array("Scotland","Republic of Ireland")

ar[0] = new Array();
ar[0][0] = new makeOption("Aberdeen");
ar[0][1] = new makeOption("Aberdeenshire");
ar[1] = new Array();
ar[1][0] = new makeOption("Carlow");
ar[1][1] = new makeOption("Cavan");

function makeOption(text){
      this.text = text;
}

function relate2(form){
        var options = form.county.options;
        for (var i = options.length - 1; i > 0; i--){
          options[i] = null;
        }
        var curAr = ar[form.country.selectedIndex];
        for (var j = 0; j < curAr.length; j++){
          options[j] = new Option(curAr[j].text);
        }
        options[0].selected = true;
}


here is my .php page:

first i read the value form DB then display all values in table...

$development_county = $row['development_county'];
$development_country = $row['development_country'];

....


<tr>
                                    <td style="width:10%;"><p><b>Country</b></p></td>
                                    <td style="width:40%;"><p>
                                    <select name="development_country" style="width:286px;" onChange="relate2(this.form)">
                                          <script type="text/javascript">
                                          <!--
                                          for(i = 0; i < country.length; i++)
                                          {
                                                document.write("<option value='" + country[i] + "'>" + country[i] + "</option>");
                                          }

                                          var selectBox = document.form.development_country;

                                          for (var no = 0; no < selectBox.options.length; no++)
                                          {
                                                if (selectBox.options[no].text == '<?=$development_country?>')
                                                {
                                                      selectBox.selectedIndex = no;
                                                      break;
                                                }
                                          }

                                          //-->
                                    </script>
                                    </select></p>
                                    </td>
                              </tr>
                              <tr>
                                    <td style="width:10%;"><p><b>County</b></p></td>
                                    <td style="width:40%;"><p>
                                    <select name="development_county" style="width:286px;">
                                    <script type="text/javascript">
                                    <!--
                                    for(i = 0; i < county.length; i++)
                                    {
                                          document.write("<option value='" + county[i] + "'>" + county[i] + "</option>");
                                    }

                                    var selectBox = document.form.development_county;

                                    for (var no = 0; no < selectBox.options.length; no++)
                                    {
                                          if (selectBox.options[no].text == '<?=$development_county?>')
                                          {
                                                selectBox.selectedIndex = no;
                                                break;
                                          }
                                    }

                                    //-->
                                    </script>
                                    </select></p>
                                    </td>
                              </tr>


where is the problem is, is in the countys selectbox, this select box dont get popluted.

the countries selectbox gets populated because it can refer to the country array in the .js file but i only have an hardcored array for the scottish county and not the irish ones

what im after is populate the 2 select boxes with all countries and corresponding countys from .js file and then set the selected index of both select boxes there values from the db match...Start Free Trial