Country state/city dropdown in html and javascript_问答_开发者

Is there any readily available snippet tha开发者_Go百科t has all the countries, states and cities for showing in a drop down in html for selection?

What is standard for this? Does everyone roll their own?

The snippet can be in html, javascript, jquery plugin.

NOTE: I know how to make chained dropdown. I'm more concerned with the data rather than technique.

Any code containing all that data would be a lot more than a snippet. I don't think you'll find a standard component for this, and I wouldn't trust any I found that claim to. There's too much subjectivity along with making your own judgements about how comprehensive you want to be.

This sort of data changes constantly and in many cases isn't universally agreed upon. I see you're from Pakistan; under which country should Kashmir be listed? See also: Burma (or do I mean Myanmar?)
Not everything fits neatly into city/state/country classes. Should Puerto Rico be listed as a country or a US state? Then you've got Crown Dependencies, Outlying Territories, Protectorates, Self-governing Colonies, etc.
Compiling a complete list of states (more generally Subnational entities, to include territories, districts, provinces, prefectures and lots more) and especially cities (do you really want to include Lost Springs, Wyoming, population :1?) would be quite an accomplishment. I'm not sure even the CIA World Factbook is that comprehensive.

Some other good sources when rolling your own are

ISO Country Codes
ISO state codes

Here is the data for free - Good luck getting 33MB presented in a drop down ;)

Seems they also have a JavaScript API - (found via Best way to get user nearest city? Python/Django) to start you off with the user's (IP) location

In the foreseeable future there may be a JSON interface according to Peter Saczkowski Operations Manager | Maxmind, Inc.:

Yes, we are actually considering switching over to JSON, but don't have a timeline quite on when that will happen. If/when this happens, we'll have updates in our newsletter and on the site.

Disclaimer I'm not affiliated with MaxMind and the themselves suggest to also look at GeoNames

MaxMind World Cities with Population Last Updated: May 17th, 2011

Product Summary: Includes city, region, country, latitude and longitude. This product doesn't contain any IP addresses. It's simply a listing of all the cities in the world. For IP to city mappings, see our MaxMind City product.

Note that this product is now a free download [33 MB]. The database will be updated about once per year, since the city data doesn't change that frequently. [license]

The database uses toponymic information, based on the Geographic Names Data Base, containing official standard names approved by the United States Board on Geographic Names and maintained by the National Geospatial-Intelligence Agency. More information is available at the Maps and Geodata link at www.nga.mil. The National Geospatial-Intelligence Agency name, initials, and seal are protected by 10 United States Code Section 445.

It also uses free population data © by Stefan Helders www.world-gazetteer.com. Visit his website to download the free population data. Our database combines Stefan's population data with the list of all cities in the world.

Another free cities database is available from GeoNames.

Product Features - MaxMind World Cities with Population

Includes the following fields:
    Country Code
    ASCII City Name
    City Name
    State/Region
    Population
    Latitude
    Longitude
    Timezone data is available through an external lookup
Approximately 2,710,000 records. 

Database Fields
Field               Data Type       Field Description
Country Code        char(2)         ISO 3166 Country Code,
ASCII City Name     varchar(100)    Name of city or town in ASCII encoding
City Name           varchar(255)    Name of city or town in ISO-8859-1 encoding. A list of cities contained in GeoIP City is available.
State/Region        char(2)         For US, ISO-3166-2 code for the state/province name. Outside of the US, FIPS 10-4 code
Population          unsigned int    Population of city (available for over 33,000 major cities only)
Latitude            numeric (float) Latitude of city where IP is located
Longitude           numeric (float) Longitude of city where IP is located

i too got into this same problem and here is some links that helped.

http://www.javascriptsource.com/forms/country-state-drop-down.html

http://sourceforge.net/projects/countries/files/

You can try this code:

<html>
<head> 
<title>Demo by kishan Radadiya</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        // Countries
        var country_arr = new Array("Select Country","AUSTRALIA","INDIA","NEW ZEALAND","USA","UAE","MAURITIUS");

        $.each(country_arr, function (i, item) {
            $('#country').append($('<option>', {
                value: i,
                text : item,
            }, '</option>' ));
        });

        // States
        var s_a = new Array();
        s_a[0]="Select State";
        s_a[1]="Select State|QUEENSLAND|VICTORIA";
        s_a[2]="Select State|ANDHRAPRADESH|KARNATAKA|TAMILNADU|DELHI|GOA|W-BENGAL|GUJARAT|MADHYAPRADESH|MAHARASHTRA|RAJASTHAN";
        s_a[3]="Select State|AUCKLAND";
        s_a[4]="Select State|NEWJERSEY|ILLINOIS";
        s_a[5]="Select State|DUBAI";
        s_a[6]="Select State|MAURITIUS";

        // Cities
        var c_a = new Array();
        c_a['QUEENSLAND']="BRISBANE";
        c_a['VICTORIA']="MELBOURNE";
        c_a['ANDHRAPRADESH']="HYDERABAD";
        c_a['KARNATAKA']="BANGLORE";
        c_a['TAMILNADU']="CHENNAI";
        c_a['DELHI']="DELHI";
        c_a['GOA']="GOA";
        c_a['W-BENGAL']="KOLKATA";
        c_a['GUJARAT']="AHMEDABAD1|AHMEDABAD2|AHMEDABAD3|BARODA|BHAVNAGAR|MEHSANA|RAJKOT|SURAT|UNA";
        c_a['MADHYAPRADESH']="INDORE";
        c_a['MAHARASHTRA']="MUMBAI|PUNE";
        c_a['RAJASTHAN']="ABU";
        c_a['AUCKLAND']="AUCKLAND";
        c_a['NEWJERSEY']="EDISON";
        c_a['ILLINOIS']="CHICAGO";
        c_a['MAURITIUS']="MAURITIUS";
        c_a['DUBAI']="DUBAI";


        $('#country').change(function(){
            var c = $(this).val();
            var state_arr = s_a[c].split("|");
            $('#state').empty();
            $('#city').empty();
            if(c==0){
                $('#state').append($('<option>', {
                    value: '0',
                    text: 'Select State',
                }, '</option>'));
            }else {
                $.each(state_arr, function (i, item_state) {
                    $('#state').append($('<option>', {
                        value: item_state,
                        text: item_state,
                    }, '</option>'));
                });
            }
            $('#city').append($('<option>', {
                value: '0',
                text: 'Select City',
            }, '</option>'));
        });

        $('#state').change(function(){
            var s = $(this).val();
            if(s=='Select State'){
                $('#city').empty();
                $('#city').append($('<option>', {
                    value: '0',
                    text: 'Select City',
                }, '</option>'));
            }
            var city_arr = c_a[s].split("|");
            $('#city').empty();

            $.each(city_arr, function (j, item_city) {
                $('#city').append($('<option>', {
                    value: item_city,
                    text: item_city,
                }, '</option>'));
            });


        });
    });
</script>
</head>
<body>
<select name="country" id="country"></select> <br>
<select name="state" id="state"></select> <br>
<select name="city" id="city"></select>
</body>
</html>

Well there are plenty of sources online for SQL databases of such utility. (I found that this one solved my problem: https://gist.github.com/ankitnetwork18/4509792) The next steps are fairly straight-forward. Just load everything through an AJAX request.