Clever Geek Handbook

Jquery country / state list help

Is there a better way to do this jquery code?

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

If the user selects USA then the state dropdown is below it, if any other country is selected then it will display another input text box and hide the dropdown.

Now, if the user is already logged into the database and they are on the page to edit this value, then I have to use PHP to show what should be shown first, either in US states or in input state.

When a user logs in, the US state list is displayed by default only if they select a non-country if the list of states is changed to a state input instead.

Hope I made sense. the end 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>
+2


source to share


3 answers


Maybe this might be the perfect solution for you:

HTML select 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-made" magic: hide the field otherstate

and fire the change event on load, as Greg mentioned. This ensures that if the country was already selected when the page was loaded, the right form box is 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>

Hope this helps you!;)

+1


source


Could you do this at ready()

?



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


source


(Approaches him from a different angle :)

With all the options / capabilities you describe here, it might be wise to drop all dropdowns and just use an autocomplete textbox.

+1


source






More articles:


All Articles