By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,568 Members | 1,688 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,568 IT Pros & Developers. It's quick & easy.

How to use multiple state drop downs from one country list

P: 3
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.

Expand|Select|Wrap|Line Numbers
  1. <form name="form1" action=""> 
  2. <table style="width:590px;"><tbody><tr>
  3. <td style="width:100px;">Country</td>
  4. <td><select name="cboCountry" style="width:auto;clear:none;" onchange="Fill_States();">
  5. <option selected="selected">12345678901234567890</option>
  6. <option>temp</option></select></td>
  7. </tr>
  8.  
  9. <tr>
  10.  
  11. <td class="td100">State<br />Province</td>
  12. <td title="Enable javascript to fill the lists."><select name="cboState" style="width:auto;" onchange="Update_Globals();">
  13.  
  14. <option selected="selected">12345678901234567890</option>
  15. <option>temp</option></select></td></tr>
  16. </tbody></table>
  17.  
Many thanks
Barry
Aug 6 '09 #1
Share this Question
Share on Google+
5 Replies


gits
Expert Mod 5K+
P: 5,390
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
Aug 9 '09 #2

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

Expand|Select|Wrap|Line Numbers
  1. var postState = '';
  2. var postCountry = '';
  3.  
  4.  
  5. var state = '\
  6. US:AK:Alaska|\
  7. US:AL:Alabama|\
  8. etc
  9. etc
  10. ';
  11.  
  12. // Country data table
  13. //
  14. // To edit the list, just delete a line or add a line. Order is important.
  15. // The order displayed here is the order it appears on the drop down.
  16. //
  17. var country = '\
  18. AF:Afghanistan|\
  19. AL:Albania|\
  20. etc
  21. etc
  22. ';
  23.  
  24. function TrimString(sInString) {
  25.   if ( sInString ) {
  26.     sInString = sInString.replace( /^\s+/g, "" );// strip leading
  27.     return sInString.replace( /\s+$/g, "" );// strip trailing
  28.   }
  29. }
  30.  
  31. // Populates the country selected with the counties from the country list
  32. function populateCountry(defaultCountry) {
  33.   if ( postCountry != '' ) {
  34.     defaultCountry = postCountry;
  35.   }
  36.   var countryLineArray = country.split('|');  // Split into lines
  37.   var selObj = document.getElementById('countrySelect');
  38.   selObj.options[0] = new Option('Select Country','');
  39.   selObj.selectedIndex = 0;
  40.   for (var loop = 0; loop < countryLineArray.length; loop++) {
  41.     lineArray = countryLineArray[loop].split(':');
  42.     countryCode  = TrimString(lineArray[0]);
  43.     countryName  = TrimString(lineArray[1]);
  44.     if ( countryCode != '' ) {
  45.       selObj.options[loop + 1] = new Option(countryName, countryCode);
  46.     }
  47.     if ( defaultCountry == countryCode ) {
  48.       selObj.selectedIndex = loop + 1;
  49.     }
  50.   }
  51. }
  52.  
  53. function populateState() {
  54.   var selObj = document.getElementById('stateSelect');
  55.   var foundState = false;
  56.   // Empty options just in case new drop down is shorter
  57.   if ( selObj.type == 'select-one' ) {
  58.     for (var i = 0; i < selObj.options.length; i++) {
  59.       selObj.options[i] = null;
  60.     }
  61.     selObj.options.length=null;
  62.     selObj.options[0] = new Option('Select State','');
  63.     selObj.selectedIndex = 0;
  64.   }
  65.   // Populate the drop down with states from the selected country
  66.   var stateLineArray = state.split("|");  // Split into lines
  67.   var optionCntr = 1;
  68.   for (var loop = 0; loop < stateLineArray.length; loop++) {
  69.     lineArray = stateLineArray[loop].split(":");
  70.     countryCode  = TrimString(lineArray[0]);
  71.     stateCode    = TrimString(lineArray[1]);
  72.     stateName    = TrimString(lineArray[2]);
  73.   if (document.getElementById('countrySelect').value == countryCode && countryCode != '' ) {
  74.     // If it's a input element, change it to a select
  75.       if ( selObj.type == 'text' ) {
  76.         parentObj = document.getElementById('stateSelect').parentNode;
  77.         parentObj.removeChild(selObj);
  78.         var inputSel = document.createElement("SELECT");
  79.         inputSel.setAttribute("name","state");
  80.         inputSel.setAttribute("id","stateSelect");
  81.         parentObj.appendChild(inputSel) ;
  82.         selObj = document.getElementById('stateSelect');
  83.         selObj.options[0] = new Option('Select State','');
  84.         selObj.selectedIndex = 0;
  85.       }
  86.       if ( stateCode != '' ) {
  87.         selObj.options[optionCntr] = new Option(stateName, stateCode);
  88.       }
  89.       // See if it's selected from a previous post
  90.       if ( stateCode == postState && countryCode == postCountry ) {
  91.         selObj.selectedIndex = optionCntr;
  92.       }
  93.       foundState = true;
  94.       optionCntr++
  95.     }
  96.   }
  97.   // If the country has no states, change the select to a text box
  98.   if ( ! foundState ) {
  99.     parentObj = document.getElementById('stateSelect').parentNode;
  100.     parentObj.removeChild(selObj);
  101.   // Create the Input Field
  102.     var inputEl = document.createElement("INPUT");
  103.     inputEl.setAttribute("id", "stateSelect");
  104.     inputEl.setAttribute("type", "text");
  105.     inputEl.setAttribute("name", "state");
  106.     inputEl.setAttribute("size", 20);
  107.     inputEl.setAttribute("value", postState);
  108.     parentObj.appendChild(inputEl) ;
  109.   }
  110. }
  111.  
  112. function initCountry(country) {
  113.   populateCountry(country);
  114.   populateState();
  115. }
  116. //-->
  117. </script>
  118.  
  119.  
  120.  
  121. // End -->
Aug 9 '09 #3

gits
Expert Mod 5K+
P: 5,390
as you could see from your posted code ... you could only populate ONE list since you have hardcoded ids that are use like this:

Expand|Select|Wrap|Line Numbers
  1. 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
Aug 10 '09 #4

P: 3
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
Aug 10 '09 #5

gits
Expert Mod 5K+
P: 5,390
?? ... 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 ... :)
Aug 12 '09 #6

Post your reply

Sign in to post your reply or Sign up for a free account.