Solved

I need a set of Conditional Select Menus Using JQuery (Country, State, County, City)

Posted on 2010-08-20
1
1,086 Views
Last Modified: 2012-05-10
I need a set of HTML Select menus that are conditional on the one above it.  The top level is the Country.  Depending upon the Country, a list of States of Providences need to populate the next menu.  Then a list of Counties in the State or province in the next menu.  Then a list of Cities based on the county.  I already have a US Zipcode database that has all the data.  I just don't know anything about JQuery and need help putting together the elements.

I am in a jam and offer 500 points to whoever can provide me with the needed code.

Phil
0
Comment
Question by:SiriusPhil
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 9

Accepted Solution

by:
matthew016 earned 500 total points
ID: 33489746
You need to bind the event "change" on your select elements.

e.g.

$('select#country').change(function() {
...
}

Each time a select element changes (country, states, etc.), you need to retrieve by AJAX the appropriate sublists and replace those by the old ones.

e.g.
a country has been selected, refresh the <select> states :

$.ajax({
    type: "GET",
    dataType: "json",
    async: false,
    url: "/ajax-get-states?country=" + countrySelected,
    success: function(data){
        $.each(data, function() {
            /* populate the <select> element of states */
            $('<option>').val(this[0]).text(this[1]).appendTo('select#states');
        });
    },
    error: function(xhr, status, ex) {}
});
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery on Submit 4 53
jQuery force form POST 7 86
Worldmap 1 28
Question regarding to $.ajax() with type "POST" vs $.post() 4 31
Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question