Help with a jquery country/state list

Question

Is there a better way to do this jquery code?

Currently I have to use PHP to insert the starting position of the jquery code.
The code is for a country/state list.

If a user picks USA then a state dropdown list is below it, if any other country is selected, then it will show a different text input box and hide the dropdown list.

Now if a user has a country saved into the database already and they are on a page to edit this value, then I have to use PHP to show which should be shown first, either the USA states or the state input.

When a user signs up, by default the USA state list is shown, only if they choose a non usa country if the state list changed to a state input instead.

Hope I made sense. the ultimate goal is to somehow make it completely javascript/jquery and not rely on PHP to set anything

country dropdown list
<select name="country" id="country" class="textarealong  signup_good"/>
<option value=1001>Choose a Country</option>
<option value=238>Zimbabwe</option>
...
</select>

USA state dropdown list
<select name="usstate" id="usstate" class="textarealong  signup_good"/>
<option value=1001>Choose a State</option>
<option value=238>Florida</option>
...
</select>

NON-USA state INPUT box
<input type="text" id="othstate" name="othstate" id="othstate" value="" class="textarealong  signup_good" maxlength="100">


<?PHP
//fix jquery country/state list based on there current saved country/state
if($_SESSION['member_info']['country'] == 224){
    //$jquerycountry = "$('#othstate').hide().attr(\"disabled\", \"disabled\");";
    $jquerycountry = "$('#othstate').hide().val('');";
}else{
    $jquerycountry = "$('#usstate').hide().attr(\"disabled\", \"disabled\");";
}
?>
<script>
$(document).ready(function() {
    locationlist();
});

function locationlist() {
    <?PHP echo $jquerycountry; // includes country jquery code from above ?>
    $('#country').change(function () {
     var val = $(this).val();
     if (val == 224) {
      $('#usstate').val('').show().removeAttr("disabled");
      $('#othstate').hide().val('');
     } else {
      $('#usstate').val('').hide().attr("disabled", "disabled");
      $('#othstate').show().removeAttr("disabled");
     }
    });
}
</script>

Answer 1

Could you just do this in ready()?

loctionlist();
$('#country').trigger('change');

Answer 2

Maybe this could be a fine solution for you:

HTML selection and input fields:

<select name="country" id="country" class="textarealong  signup_good"/>
  <option value=1001>Choose a Country</option>
  <option value=238>Zimbabwe</option>
  <option value=239>Rwanda</option>  
</select>

USA state dropdown list
<select name="usstate" id="usstate" class="textarealong  signup_good"/>
  <option value=1001>Choose a State</option>
  <option value=238>Florida</option>
</select>

<input id="otherstate"/>

Then the jQuery part with some 'ready'-magic: hide the otherstate field and trigger the change event on loading like Greg mentioned already. This makes sure, that if a country was already selected on page load the right form field will be selected:

<script type="text/javascript">
  $(document).ready(function () {
    $("#otherstate").hide();
    $("#country").trigger("change");
  });

  $("#country").change(function () {
    if ($("#country").val() != '1001') {
      $("#usstate").hide();
      $("#otherstate").show();
    } else {
      $("#usstate").show();
      $("#otherstate").hide();    
    }
  });
</script>

Hopes this will help you! ;)

Answer 3

(Coming at it from a different angle entirely:)

With all the options/possibilities you're describing here, it might be wise to scrap all the drop-downs and just use an autocomplete text field.