Add Dropdown Country & State List Dynamically into HTML form by Javascript

SourceForge project Homepage

You can use a JavaScript to add all the country names and  state names’ Dropdown list. Which is actually done by HTML <select> and <insert> tag. I’ve written a JavaScript which can be simply inserted into your HTML file. Later, call my pre-defined functions and the country and state list will be automatically added into your HTML :)

Live Demo!

Check the code live here

How to use?

1.  Download Source Code (Latest Version) from here

Unzip and get the .js file

2. Put this code between your <HEAD> and </HEAD> section:

<script type= "text/javascript" src = "countries3.js"></script>

3. Put this code between your <BODY> and </BODY> section:

 Select Country:
 <select onchange="print_state('state',this.selectedIndex);" id="country" name = "country"></select> <br />
 City/District/State:
 <select name ="state" id = "state"></select>
 <script language="javascript"<print_country("country");</script>

Please note that, we are using two <select> tags, which are actual drop-down boxes. Here I’ve chosen “country” and “state” as their ID attribute. You can choose any othe id attribute or name attribute as you like. But whatever you choose, you make to pass the correct IDs when calling the JavaScript Functions.

If you only want Country list to appear on the page, Simply use following bit of code in Body section:

Select Country:   <select id="country" name ="country"></select>
 <script language="javascript">print_country("country")</script>

You’ve to pass the ID of <select> element in print_country function, which actually prints the names of the countries.

Disclaimer: I’ve collected the names of countries and states from internet, and of course, cannot authenticate their validity! :P

Happy Coding :D

Advertisement