How can I toggle elements in jquery dynamically?

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.

Answer 2

You could do that, but if you want to select the element your cities are in by class or id, you have to change 2 things:

1. use a class or id selector: $('.' + this.name) or $('#' + this.name), respectively.
2. make sure your classes or ids don't have spaces in them.

Edit:

Maybe onchange would be more appropriate here:

html:

<select id="counties">
    <option value="">Choose one...</option>
    <option value="the-county">The county</option>
    <option value="the-other-county">The other county</option>
</select>

<div class="city the-county">The city</div>
<div class="city the-county">The second city</div>
<div class="city the-other-county">The other city</div>

javascript:

$(document).ready(function() {
    var showCities = function(county) {
        var $cities = $('.city'),
            $countyCities = county ? $('.city.' + county) : [],
            $otherCities = $cities.not($countyCities);

        $otherCities.hide();
        $countyCities.show();
    }

    $('#counties').change(function() {
        showCities($(this).val());
    });

    // Don't show anything at page load.
    showCities(null);
});

Answer 3

A very simple client side implementation would be something like this:

$(document).ready(function() {
  $('.county').change(function(){
      $.get('/cities', {whichCounty: $(this).val()}, function(html) {
          $('#cities').html(html);         
      });
  });
});

The above assumes that you have a server setup which takes a whichCounty parameter, and sends a fully assembled <select> back to the client, which is injected into a #cities container.

Another way would be to get the server to send back JSON key-value pairs (e.g. CityId => CityName), clear the options of the current select, and loop over the new values, constructing the options dynamically and appending them to the 'cities' <select>.

If the above example has any advantages over the latter (JSON) approach, it is ease of implementation on the client-side.