SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist IJoeR's Avatar
    Join Date
    Feb 2003
    Location
    Somewhere in, MD
    Posts
    400
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you reset the values of a drop down menu?

    I have a State drop down menu and a Country drop down menu.

    When you select a state from the USA it displays a drop down menu that says Choose a Country, you can only choose USA from this drop down menu.

    Here's the problem, let's say you come to the form and you accidently select Minnesota and you choose USA as the country, but you change it from Minnesota to a state Canada. When you choose a Canadian state it shows the drop down menu that contains only Canada as the country. So yuo choose Canada from the Country drop down menu.

    I'm using CSS to hide and show these different drop down menus, so now what i want to add is when you select a state from the US and then select a state from Canada, it should set all values of Country to NULL.

    Anyway know how i can do that?

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Lucknow, UP, India
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can simply store different country-states in an array and update the options on the fly. or better still if the choices are limited to few countries then make the country drop-down into textfield that will be set according to the state selected.
    Who the hell is "General Failure"
    and why is he reading my hard disk???

  3. #3
    SitePoint Evangelist IJoeR's Avatar
    Join Date
    Feb 2003
    Location
    Somewhere in, MD
    Posts
    400
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would probably but i am stuck with the problem i have and i need a solution or need to know if its possible. There are multiple versions of the website and its for a client so i need to keep the time i spend on it to a minimum.

    So do you know how to reset the values?

    rob

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a trick question.

    There are no states in Canada.

    ps post your code, shouldn't be too hard to figure out.

  5. #5
    SitePoint Evangelist IJoeR's Avatar
    Join Date
    Feb 2003
    Location
    Somewhere in, MD
    Posts
    400
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my state drop down menu, of course it holds all of the states in it. I took them out to keep the post as short as possible.


    Code:
     
     
    Select a State<span class="req">*<BR></span>
    <select name="state" onChange="getCountry()" class="formF" style="width:150px;">
    <OPTION value="" selected>-- select your state --</OPTION>
    <OPTION value="AL">Alabama</OPTION>
    <OPTION value="WY">Wyoming</OPTION>
    <OPTION value="">--------------------</OPTION>
    <OPTION value="AA">US Military - America (AA)</OPTION>
    <OPTION value="AE">US Military - Europe (AE)</OPTION>
    <OPTION value="AP">US Military - Pacific (AP)</OPTION>
    <OPTION value="">--------------------</OPTION>
    <OPTION value="AB">ALBERTA</OPTION>
    <OPTION value="BC">BRITISH COLUMBIA</OPTION>
    <OPTION value="MB">MANITOBA</OPTION>
    <OPTION value="NB">NEW BRUNSWICK</OPTION>
    <OPTION value="NF">NEWFOUNDLAND</OPTION>
    <OPTION value="NS">NOVA SCOTIA</OPTION>
    <OPTION value="NT">NORTHWEST TERRITORY</OPTION>
    <OPTION value="ON">ONTARIO</OPTION>
    <OPTION value="PE">PRINCE EDWARD ISLAND</OPTION>
    <OPTION value="QC">QUEBEC</OPTION>
    <OPTION value="SK">SASKATCHEWAN</OPTION>
    <OPTION value="YT">YUKON TERRITORY</OPTION>
    <OPTION value="">--------------------</OPTION>
    <OPTION value="FC">Foreign Country</OPTION>	  
    </select>
    You choose a state from the drop down menu and it changes the "disply" style of a div tag to make a drop down menu for the Country to appear.

    The country drop down menus -- there are about 8 million foreign countries, so again i deleted them out of the post to keep it short.

    Code:
      
    <span class="ShowUSA" ID="ShowUSA" style="display:none;">
    Country<span class="req">*<BR></span>
    <SELECT name="Country" id="Country" class="formF" style="width:325px;">
    <OPTION value="" selected>-- choose a country  --</option>
    <OPTION value="USA">United States</option>
    </select>
    </span>
    <span class="ShowFC" ID="ShowFC" style="display:none;">
    Country<span class="req">*<BR></span>
    <SELECT name="Country" id="Country" class="formF" style="width:325px;">
    <OPTION value="" selected>-- choose a country  --</option>
    <OPTION value="AFG">Afghanistan</OPTION>
    <OPTION value="ZWE">Zimbabwe</OPTION>
    </select>
    
    </span>
    <span class="ShowCAN" ID="ShowCAN" style="display:none;">
    Country<span class="req">*<BR></span>
    <SELECT name="Country" id="Country" class="formF" style="width:325px;">
    <OPTION value="" selected>-- choose a country  --</option>
    <OPTION value="CAN">Canada</option>
    </select>
    </span>
    <span class="ShowSEL" ID="ShowSEL" style="display:none;">
    Country<span class="req">*<BR></span>
    <SELECT name="Country" id="Country" class="formF" style="width:325px;">
    <OPTION value="" selected>-- choose a country  --</option>
    </select>
    </span>
    The show/hide javascript that makes the countries drop down menus appear depending on what state you select. If you select a state in the US, the USA drop down menu appears. If you choose a Canadian "province", though its listed under the state drop down, it will show the Canadian drop down menu. And finally if you choose the foreign country from the state drop down menu it shows the Foreign Country drop down menu with all of the foreign countries in it.

    Code:
    <script type="text/javascript">
    /////// Do the Country thing
    function getCountry() {
      var countrySel = document.cfform.state;
      var state = (countrySel.options[countrySel.selectedIndex].value);
      var burn = 0;
      
      if (state == "FC")
       {
     /* show FC menu */
     document.getElementById('ShowFC').style.display='inline';
     document.getElementById('ShowCAN').style.display='none';
     document.getElementById('ShowUSA').style.display='none';
     document.getElementById('ShowSEL').style.display='none';
     }
     
     else if(state == "none") 
      {
       // show CAN as the country
     document.getElementById('ShowFC').style.display = 'none';
     document.getElementById('ShowUSA').style.display='none';
     document.getElementById('ShowCAN').style.display='none';
     document.getElementById('ShowSEL').style.display='inline';
    }
      
       else if(state == "AL" || state == "AK" || state == "AS" || state == "AZ" || state == "AR" || state == "CA" || state == "CZ" || state == "CO" || state == "CT" || state == "DE" || state == "DC" || state == "FM" || state == "FL" || state == "GA" || state == "GU" || state == "HI" || state == "ID" || state == "IL" || state == "IN" || state == "IA" || state == "KS" || state == "KY" || state == "LA" || state == "ME" || state == "MH" || state == "MD" || state == "MA" || state == "MI" || state == "MN" || state == "MS" || state == "MO" || state == "MT" || state == "NE" || state == "NV" || state == "NH" || state == "NJ" || state == "NM" || state == "NY" || state == "MP" || state == "NC" || state == "ND" || state == "OH" || state == "OK" || state == "OR" || state == "PW" || state == "PA" || state == "PR" || state == "RI" || state == "SC" || state == "SD" || state == "TN" || state == "TX" || state == "UT" || state == "VT" || state == "VI" || state == "VA" || state == "WA" || state == "WV" || state == "WI" || state == "WY" || state == "AA" || state == "AE" || state == "AP") 
    	{
     // show USA menu
     document.getElementById('ShowUSA').style.display = 'inline';
     document.getElementById('ShowFC').style.display = 'none';
     document.getElementById('ShowCAN').style.display = 'none';
     document.getElementById('ShowSEL').style.display='none';
     }
      
      else if(state == "AB" || "BC" || "MB" || "NB" || "NF" || "NS" || "NT" || "ON" || "PE" || "QC" || "SK" || "YT" ) 
      {
       // show CAN as the country
     document.getElementById('ShowFC').style.display = 'none';
     document.getElementById('ShowUSA').style.display='none';
     document.getElementById('ShowCAN').style.display='inline';
     document.getElementById('ShowSEL').style.display='none';
      }
      document.cfform.Country.value = burn;
    };
    </script>
    I'm thinking i need to add a line to each one of these that first sets the value of form.Country to nothing and then it fills in what you want. Just not sure how to do that. The issue i am having is its possible to select one state and then another state in a different country and select both so it sends "USA, CAN" -- something like that. So i need to keep only one value...The correct value.

    Thanks for your help everyone.

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at this example, it addresses your problem:
    Code:
    <html>
    <head>
    <title>State/Country thing</title>
    
    <script type="text/javascript">
    
    // note that I added disabled=true to each of the country selects
    
    // this reference object allows me to know in which country is the selected territory
    // you can delete all the carriage returns if you want it on one line for compactness
    var countryStateRef = {
    	"AL" : "USA",
    	"AK" : "USA",
    	"AS" : "USA",
    	"AZ" : "USA",
    	"AR" : "USA",
    	"CA" : "USA",
    	"CZ" : "USA",
    	"CO" : "USA",
    	"CT" : "USA",
    	"DE" : "USA",
    	"DC" : "USA",
    	"FM" : "USA",
    	"FL" : "USA",
    	"GA" : "USA",
    	"GU" : "USA",
    	"HI" : "USA",
    	"ID" : "USA",
    	"IL" : "USA",
    	"IN" : "USA",
    	"IA" : "USA",
    	"KS" : "USA",
    	"KY" : "USA",
    	"LA" : "USA",
    	"ME" : "USA",
    	"MH" : "USA",
    	"MD" : "USA",
    	"MA" : "USA",
    	"MI" : "USA",
    	"MN" : "USA",
    	"MS" : "USA",
    	"MO" : "USA",
    	"MT" : "USA",
    	"NE" : "USA",
    	"NV" : "USA",
    	"NH" : "USA",
    	"NJ" : "USA",
    	"NM" : "USA",
    	"NY" : "USA",
    	"MP" : "USA",
    	"NC" : "USA",
    	"ND" : "USA",
    	"OH" : "USA",
    	"OK" : "USA",
    	"OR" : "USA",
    	"PW" : "USA",
    	"PA" : "USA",
    	"PR" : "USA",
    	"RI" : "USA",
    	"SC" : "USA",
    	"SD" : "USA",
    	"TN" : "USA",
    	"TX" : "USA",
    	"UT" : "USA",
    	"VT" : "USA",
    	"VI" : "USA",
    	"VA" : "USA",
    	"WA" : "USA",
    	"WV" : "USA",
    	"WI" : "USA",
    	"WY" : "USA",
    	"AA" : "USA",
    	"AE" : "USA",
    	"AP" : "USA",	
    	"AB" : "CAN",
    	"BC" : "CAN",
    	"MB" : "CAN",
    	"NB" : "CAN",
    	"NF" : "CAN",
    	"NS" : "CAN",
    	"NT" : "CAN",
    	"ON" : "CAN",
    	"PE" : "CAN",
    	"QC" : "CAN",
    	"SK" : "CAN",
    	"YT" : "CAN",
    	"FC" : "FC",
    	"none" : "SEL"
    }
    
    // a list of the span IDs used (so we can hide/show them easily)
    var countrySpans = ["ShowFC","ShowCAN","ShowUSA","ShowSEL"];
    
    function getCountry() {
    
      var countrySel = document.cfform.state;
      var state = (countrySel.options[countrySel.selectedIndex].value);
      var burn = 0;
    
    	// hide all the spans, and disable the select within (so it doesn't get submitted)
    	for( var i=0; i < countrySpans.length; i++ ) {
    		var theCountry = document.getElementById(countrySpans[i]);
    		theCountry.style.display='none';
    		theCountry.getElementsByTagName("SELECT")[0].disabled = true;
    	}
    	
    	// show the span corresponding to the selected country and enable its select
    	var selectedSpan = document.getElementById("Show" + countryStateRef[state]);
    	selectedSpan.style.display = "inline";
    	selectedSpan.getElementsByTagName("SELECT")[0].disabled = false;
      
      document.cfform.Country.value = burn;
    };
    </script>
     
    
    </head>
    <body>
    
    <form name="cfform" method="post" action="http://localhost/showform.asp">
    
    Select a State<span class="req">*<BR></span>
    <select name="state" onChange="getCountry()" class="formF" style="width:150px;">
    <OPTION value="" selected>-- select your state --</OPTION>
    <OPTION value="AL">Alabama</OPTION>
    <OPTION value="WY">Wyoming</OPTION>
    <OPTION value="">--------------------</OPTION>
    <OPTION value="AA">US Military - America (AA)</OPTION>
    <OPTION value="AE">US Military - Europe (AE)</OPTION>
    <OPTION value="AP">US Military - Pacific (AP)</OPTION>
    <OPTION value="">--------------------</OPTION>
    <OPTION value="AB">ALBERTA</OPTION>
    <OPTION value="BC">BRITISH COLUMBIA</OPTION>
    <OPTION value="MB">MANITOBA</OPTION>
    <OPTION value="NB">NEW BRUNSWICK</OPTION>
    <OPTION value="NF">NEWFOUNDLAND</OPTION>
    <OPTION value="NS">NOVA SCOTIA</OPTION>
    <OPTION value="NT">NORTHWEST TERRITORY</OPTION>
    <OPTION value="ON">ONTARIO</OPTION>
    <OPTION value="PE">PRINCE EDWARD ISLAND</OPTION>
    <OPTION value="QC">QUEBEC</OPTION>
    <OPTION value="SK">SASKATCHEWAN</OPTION>
    <OPTION value="YT">YUKON TERRITORY</OPTION>
    <OPTION value="">--------------------</OPTION>
    <OPTION value="FC">Foreign Country</OPTION>	  
    </select>
    
    
    
    <span class="ShowUSA" ID="ShowUSA" style="display:none;">
    Country<span class="req">*<BR></span>
    <SELECT name="Country" id="Country" class="formF" style="width:325px;" disabled=true>
    <OPTION value="" selected>-- choose a country  --</option>
    <OPTION value="USA">United States</option>
    </select>
    </span>
    <span class="ShowFC" ID="ShowFC" style="display:none;">
    Country<span class="req">*<BR></span>
    <SELECT name="Country" id="Country" class="formF" style="width:325px;" disabled=true>
    <OPTION value="" selected>-- choose a country  --</option>
    <OPTION value="AFG">Afghanistan</OPTION>
    <OPTION value="ZWE">Zimbabwe</OPTION>
    </select>
    
    </span>
    <span class="ShowCAN" ID="ShowCAN" style="display:none;">
    Country<span class="req">*<BR></span>
    <SELECT name="Country" id="Country" class="formF" style="width:325px;" disabled=true>
    <OPTION value="" selected>-- choose a country  --</option>
    <OPTION value="CAN">Canada</option>
    </select>
    </span>
    <span class="ShowSEL" ID="ShowSEL" style="display:none;">
    Country<span class="req">*<BR></span>
    <SELECT name="Country" id="Country" class="formF" style="width:325px;" disabled=true>
    <OPTION value="" selected>-- choose a country  --</option>
    </select>
    </span>
    
    <input type="submit" value="Send Form" />
    
    </form>
    </body>
    </html>

  7. #7
    SitePoint Evangelist IJoeR's Avatar
    Join Date
    Feb 2003
    Location
    Somewhere in, MD
    Posts
    400
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try that out...looks like it uses basically the same method i was using before, just some more javascript which is great.

    Thanks for your help.

  8. #8
    SitePoint Evangelist IJoeR's Avatar
    Join Date
    Feb 2003
    Location
    Somewhere in, MD
    Posts
    400
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey it worked really well, thanks for your help.

    One other thing i noticed is when i submit my form and lets say i have an error in my info, like I left a field blank or selected something wrong, when i click the back button my Country drop down menu disappears (now when its not visible its disabled). So is there a way to make it so when you click the back button in case you make a mistake it keeps what you selected as the country??
    Last edited by IJoeR; Apr 26, 2006 at 09:12. Reason: left out a word...


Bookmarks

Posting Permissions

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