How to use multiple state drop downs from one country list

[bennever]

Hi, I plan to use drop down lists to populate team results and will use the standard country/state drop down lists as the base code.

The question: how can I populate multiple (5) states from entering one country?

Here is the current code which works for one state...however if I add another "State" (class=td100) row identical to the one below neither state field offers the drop down list.

<form name="form1" action=""> 
<table style="width:590px;"><tbody><tr>
<td style="width:100px;">Country</td>
<td><select name="cboCountry" style="width:auto;clear:none;" onchange="Fill_States();">
<option selected="selected">12345678901234567890</option>
<option>temp</option></select></td>
</tr>
 
<tr>
 
<td class="td100">State<br />Province</td>
<td title="Enable javascript to fill the lists."><select name="cboState" style="width:auto;" onchange="Update_Globals();">
 
<option selected="selected">12345678901234567890</option>
<option>temp</option></select></td></tr>
</tbody></table>
 

Many thanks
Barry

[gits]

as far as i understand that ... this is a JavaScript issue ... since you cannot achieve that just with html ... to help you with this, you should explain a bit more what you mean with 'standard country/state drop down lists' and how the code currently populates the one list that is filled correctly. may be posting some code regarding that would help a lot.

kind regards

[bennever]

Thanks. Here is a cut-down version of the code...

var postState = '';
var postCountry = '';
 
 
var state = '\
US:AK:Alaska|\
US:AL:Alabama|\
etc
etc
';
 
// Country data table
//
// To edit the list, just delete a line or add a line. Order is important.
// The order displayed here is the order it appears on the drop down.
//
var country = '\
AF:Afghanistan|\
AL:Albania|\
etc
etc
';
 
function TrimString(sInString) {
  if ( sInString ) {
    sInString = sInString.replace( /^\s+/g, "" );// strip leading
    return sInString.replace( /\s+$/g, "" );// strip trailing
  }
}
 
// Populates the country selected with the counties from the country list
function populateCountry(defaultCountry) {
  if ( postCountry != '' ) {
    defaultCountry = postCountry;
  }
  var countryLineArray = country.split('|');  // Split into lines
  var selObj = document.getElementById('countrySelect');
  selObj.options[0] = new Option('Select Country','');
  selObj.selectedIndex = 0;
  for (var loop = 0; loop < countryLineArray.length; loop++) {
    lineArray = countryLineArray[loop].split(':');
    countryCode  = TrimString(lineArray[0]);
    countryName  = TrimString(lineArray[1]);
    if ( countryCode != '' ) {
      selObj.options[loop + 1] = new Option(countryName, countryCode);
    }
    if ( defaultCountry == countryCode ) {
      selObj.selectedIndex = loop + 1;
    }
  }
}
 
function populateState() {
  var selObj = document.getElementById('stateSelect');
  var foundState = false;
  // Empty options just in case new drop down is shorter
  if ( selObj.type == 'select-one' ) {
    for (var i = 0; i < selObj.options.length; i++) {
      selObj.options[i] = null;
    }
    selObj.options.length=null;
    selObj.options[0] = new Option('Select State','');
    selObj.selectedIndex = 0;
  }
  // Populate the drop down with states from the selected country
  var stateLineArray = state.split("|");  // Split into lines
  var optionCntr = 1;
  for (var loop = 0; loop < stateLineArray.length; loop++) {
    lineArray = stateLineArray[loop].split(":");
    countryCode  = TrimString(lineArray[0]);
    stateCode    = TrimString(lineArray[1]);
    stateName    = TrimString(lineArray[2]);
  if (document.getElementById('countrySelect').value == countryCode && countryCode != '' ) {
    // If it's a input element, change it to a select
      if ( selObj.type == 'text' ) {
        parentObj = document.getElementById('stateSelect').parentNode;
        parentObj.removeChild(selObj);
        var inputSel = document.createElement("SELECT");
        inputSel.setAttribute("name","state");
        inputSel.setAttribute("id","stateSelect");
        parentObj.appendChild(inputSel) ;
        selObj = document.getElementById('stateSelect');
        selObj.options[0] = new Option('Select State','');
        selObj.selectedIndex = 0;
      }
      if ( stateCode != '' ) {
        selObj.options[optionCntr] = new Option(stateName, stateCode);
      }
      // See if it's selected from a previous post
      if ( stateCode == postState && countryCode == postCountry ) {
        selObj.selectedIndex = optionCntr;
      }
      foundState = true;
      optionCntr++
    }
  }
  // If the country has no states, change the select to a text box
  if ( ! foundState ) {
    parentObj = document.getElementById('stateSelect').parentNode;
    parentObj.removeChild(selObj);
  // Create the Input Field
    var inputEl = document.createElement("INPUT");
    inputEl.setAttribute("id", "stateSelect");
    inputEl.setAttribute("type", "text");
    inputEl.setAttribute("name", "state");
    inputEl.setAttribute("size", 20);
    inputEl.setAttribute("value", postState);
    parentObj.appendChild(inputEl) ;
  }
}
 
function initCountry(country) {
  populateCountry(country);
  populateState();
}
//-->
</script>
 
 
 
// End -->

[gits]

as you could see from your posted code ... you could only populate ONE list since you have hardcoded ids that are use like this:

document.getElementById('stateSelect');

so to poulate more then one node you could pass an additional id or id-list to the functions and use that, so you could either make a number of calls with one id or write a loop inside the function so that you could pass a list ...

kind regards

[bennever]

Thanks for your help on this. I'm fine with html/css, even php, but js is sadly beyond me at the moment. I found this free drop down coding and thought it would be ideal for snooker league teams to send in their results ie team name is selected and then player names are populated (as states are in the example).

If it's not too much trouble would you be able to give me the changes I would need to make to the code to populate 5 nodes from one drop down selection? Kind rgds

Barry

[gits]

?? ... i will not give you the entire solution for this ... because this is not what i'm here for. in case you show some efforts to learn and try something for your own i'm glad to help you out ...and point you to the right direction, the idea for the adaptions is up there in my previous post ... :)