title: jquery country select when country is saved already?
body: <p>I have an issue with this jquery code below.  Please give me advice or code if you can help</p>
  
  <p>So I have a country drop down list, a state drop down list for USA, and a state input field for non USA users.</p>
  
  <p>When you select USA from the country list it hides the othstate field, when you select any country other then the USA it hides the USA statelist and shows the input field</p>
  
  <p>So far so good, now here is where the problem comes in, this code works great for a signup form but not for editing a users location.</p>
  
  <p>When a user has this data already saved in mysql/php when they visit the edit page it will not work very well.  1 solution I was thinking is to have 2 javascript functions and use PHP to parse the correct one depending on there country, that deals with the issue if they have other country then the USA saved, it would load with example England selected but would show USA states instead of state input field and vice.</p>
  
  <p>There is still 1 major issue though.  If you select a Non USA country, you then get the othstate input box, you can then type in data, now lets say I did this and typed in some data and then selected USA from country list, it would hide the data I typed in and let me select a state.</p>
  
  <p>The problem with this is in the backend with PHP I check to see if the text input is empty or the state is empty, this flaw would allow both to hold data.</p>
  
  <p>I hope this made sense and I would love your opinions and help please</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" &gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
     locationlist();
  });
  
  function locationlist() {
      $('#othstate').hide();
      $('#country').change( function() {         
          var val = $(this).val();
       if (val == 223) {
           $('#state').val('').show();
           $('#othstate').hide();
       }else {
          $('#state').val('').hide();
          $('#othstate').show();
       }
     });
   }
  &lt;/script&gt;
  
  &lt;form method="post" name="form1"&gt;
     &lt;select style="background-color: #ffffa0" name="country" id="country"&gt;
        &lt;option&gt;Select Country&lt;/option&gt;
        &lt;option value="223" selected="selected"&gt;USA&lt;/option&gt;
        &lt;option value="224"&gt;Canada&lt;/option&gt;
        &lt;option value="225"&gt;England&lt;/option&gt;
        &lt;option value="226"&gt;Ireland&lt;/option&gt;
     &lt;/select&gt;
  &lt;div id="state"&gt;
     &lt;select style="background-color: #ffffa0" name="state" id="state"&gt;
        &lt;option&gt;Select State&lt;/option&gt;
        &lt;option value="1"&gt;Florida&lt;/option&gt;
        &lt;option value="2"&gt;New York&lt;/option&gt;
        &lt;option value="3" selected="selected"&gt;Georgia&lt;/option&gt;
        &lt;option value="4"&gt;California&lt;/option&gt;
     &lt;/select&gt;
  &lt;/div&gt;
  &lt;div id="othstate"&gt;&lt;input type="text" name="othstate" id="othstate" value="" class="textBox"&gt;&lt;/div&gt;
  </code></pre>