Question

So what I want to do is to make a dynamic little script for selecting countys and then cities. Well I have all the countys and citys in a mysql database. If I choose a county in a <select> tag the cities related to the county should appear in the next <select> tag.

So basically maybe I could do something like

$(document).ready(function() {
  $('.county').click(function(){
    $(this.name).toggle(); 
  });
});

where the option for countys maybe look something like this:

<option value="This County" name="This County" class="county">This County</option>

When I click this above then every city connected to "This County" should appear. Just need some fining in this. Anyone think they can help?

Answer 1

If everything is already on the page in the form of select then you could use the value of the county option to show up the correct select.

$("#counties").change(function(){
   $(".cities").hide();
   $("#" + this.value + "-cities").show();
});

And example of this working: http://jsfiddle.net/jonathon/upaar/

However, I’d recommend against this since it’s not great. You’ll have every single city on your page even when you only need a small amount. The best option would be to populate your counties list and then populate the cities on the fly with your own JSON and the $.get() method.

For example (I’m just using GeoNames here, you’ll substitute with your own data);

$.get('http://ws.geonames.org/countryInfoJSON', function(data) {
    $.each(data.geonames, function(i, item) {
        $("#countries").append("<option value='" + item.geonameId + "'>" + item.countryName + "</option>");
    });
});

$("#countries").change(function() {
    $("#cities").empty();

    $.get('http://ws.geonames.org/childrenJSON?geonameId=' + this.value, function(data) {
        $.each(data.geonames, function(i, item) {
            $("#cities").append("<option value='" + item.geonameId + "'>" + item.name + "</option>");
        });
    });
});

Example of it working: http://jsfiddle.net/jonathon/QkXAK/

The above loads the countries and sets the change event of the countries select. When this value changes, it goes off to the server with the data needed. In this case, it sends off the geonameId and finds the child elements of that country. It then clears the cities select and adds the cities returned in the AJAX request.

The benefit of this is that you only load what you need, saving yourself from having to send all the data on the page load. I use GeoNames in the example but if you have your own dataset then the basic principles are the same.