Help with a jquery country/state list - php

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

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 2

Could you just do this in ready()?
loctionlist();
$('#country').trigger('change');

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.