choose your country

Written by @kerixa 21 August 2012

A drop-down list is used to fill out various forms on the websites. In the following code, a dropdown list is provided for selecting a country. This country list is filtrable, which means you can search in it, and also uses beautiful colors.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlfreecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.htmlfreecode.com, Coded by: Krishna Eydat-->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var africaArray =  new Array("('Select country','',true,true)",
"('Ethiopia')",
"('Somalia')",
"('South Africa')",
"('Other')");
var middleeastArray =  new Array("('Select country','',true,true)",
"('Egypt')",
"('Iran')",
"('Israel')",
"('Kuwait')",
"('Lebanon')",
"('Morocco')",
"('Saudi Arabia')",
"('Syria')",
"('Turkey')",
"('U. A. Emirates')",
"('Other')");
var asiaArray =  new Array("('Select country','',true,true)",
"('Armenia')",
"('Bangladesh')",
"('Cambodia')",
"('China')",
"('India')",
"('Indonesia')",
"('Iran')",
"('Japan')",
"('Malaysia')",
"('Myanmar')",
"('Nepal')",
"('Pakistan')",
"('Philippines')",
"('Singapore')",
"('South Korea')",
"('Sri Lanka')",
"('Taiwan')",
"('Thailand')",
"('Uzbekistan')",
"('Vietnam')",
"('Other')");
var europeArray =  new Array("('Select country','',true,true)",
"('Albania')",
"('Austria')",
"('Belarus')",
"('Belgium')",
"('Bosnia')",
"('Bulgaria')",
"('Croatia')",
"('Cyprus')",
"('Czech Rep.')",
"('Denmark')",
"('Estonia')",
"('Finland')",
"('France')",
"('Germany')",
"('Greece')",
"('Hungary')",
"('Iceland')",
"('Ireland')",
"('Italy')",
"('Latvia')",
"('Liechtenstein')",
"('Lithuania')",
"('Luxembourg')",
"('Macedonia')",
"('Malta')",
"('Monaco')",
"('Netherlands')",
"('Norway')",
"('Poland')",
"('Portugal')",
"('Romania')",
"('Russia')",
"('Slovakia')",
"('Slovenia')",
"('Spain')",
"('Sweden')",
"('Switzerland')",
"('Ukraine')",
"('United Kingdom')",
"('Other')");
var australiaArray =  new Array("('Select country','',true,true)",
"('Australia')",
"('New Zealand')",
"('Other')");
var lamericaArray =  new Array("('Select country','',true,true)",
"('Costa Rica')",
"('Cuba')",
"('El Salvador')",
"('Guatemala')",
"('Haiti')",
"('Jamaica')",
"('Mexico')",
"('Panama')",
"('Other')");
var namericaArray =  new Array("('Select country','',true,true)",
"('Canada')",
"('USA')",
"('Other')");
var samericaArray =  new Array("('Select country','',true,true)",
"('Argentina')",
"('Bolivia')",
"('Brazil')",
"('Chile')",
"('Colombia')",
"('Ecuador')",
"('Paraguay')",
"('Peru')",
"('Suriname')",
"('Uruguay')",
"('Venezuela')",
"('Other')");
function populateCountry(inForm,selected) {
var selectedArray = eval(selected + "Array");
while (selectedArray.length < inForm.country.options.length) {
inForm.country.options[(inForm.country.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + selectedArray[i]);
}
if (inForm.region.options[0].value == '') {
inForm.region.options[0]= null;
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0);
}
else {   	
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0);
            }
         }
      }
   }
}
function populateUSstate(inForm,selected) {  
var stateArray =  new Array("('Select State','',true,true)",
"('Alabama')",
"('Alaska')",
"('Arizona')",
"('Arkansas')",
"('California')",
"('Colorado')",
"('Connecticut')",
"('Delaware')",
"('Columbia')",
"('Florida')",
"('Georgia')",
"('Hawaii')",
"('Idaho')",
"('Illinois')",
"('Indiana')",
"('Iowa')",
"('Kansas')",
"('Kentucky')",
"('Louisiana')",
"('Maine')",
"('Maryland')",
"('Massachusetts')",
"('Michigan')",
"('Minnesota')",
"('Mississippi')",
"('Missouri')",
"('Montana')",
"('Nebraska')",
"('Nevada')",
"('New Hampshire')",
"('New Jersey')",
"('New Mexico')",
"('New York')",
"('North Carolina')",
"('North Dakota')",
"('Ohio')",
"('Oklahoma')",
"('Oregon')",
"('Pennsylvania')",
"('Rhode Island')",
"('South Carolina')",
"('South Dakota')",
"('Tennessee')",
"('Texas')",
"('Utah')",
"('Vermont')",
"('Virginia')",
"('Washington')",
"('West Virginia')",
"('Wisconsin')",
"('Wyoming')");
if (selected == 'USA') {
for (var i=0; i < stateArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + stateArray[i]);
}
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0)
}
else {    	
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0)
         }
      }
   }
}
else {
}  
if (selected == 'Other') {
newCountry = "";
while (newCountry == ""){
newCountry=prompt ("Please enter the name of your country.", "");
}
if (newCountry != null) {
inForm.country.options[(inForm.country.options.length-1)]=new Option(newCountry,newCountry,true,true);
inForm.country.options[inForm.country.options.length]=new Option('Other, not listed','Other');
   }
}
if(inForm.country.options[0].text == 'Select country') {
inForm.country.options[0]= null;
   }
}
// End -->
</script>

<!-- CCONTINUE  -->

<BODY>

<center>
<form name="globe">
<select name="region" onChange="populateCountry(document.globe,document.globe.region.options[document.globe.region.selectedIndex].value)">
<option selected value=''>Select Region</option>
<option value='asia'>Asia</option>
<option value='africa'>Africa</option>
<option value='australia'>Australia</option>
<option value='europe'>Europe</option>
<option value='middleeast'>Middle East</option>
<option value='lamerica'>Latin America</option>
<option value='namerica'>North America</option>
<option value='samerica'>South America</option>
</select>
<select name="country" onChange="populateUSstate(document.globe,document.globe.country.options[document.globe.country.selectedIndex].text)">
<option value=''><--------------------</option>
</select>
</form>
</center>
<br />
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font><a target='_blank' href='www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Prashanthcs11, Designer Diva, Jirgensons E, vamsi, wapmohin
advertisement 2