SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict dr_dumb99's Avatar
    Join Date
    Sep 2004
    Location
    Pakistan
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to get value of selected country from drop down menu

    Hi!
    Kindly visit following link.
    http://javascript.internet.com/forms/country.html

    If we select some region from drop dowm, then countries relating to that region are filled in second drop down.

    I am using this code in my form. My problem is that how can I get single or multiple selected countries value on form action(submission) page.

    Thanks in advance

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Give the country a name field, and set the multiple attribute so that you can select more than one.

    Code html4strict:
    <select name="country" multiple="multiple">
    	<option value="nz">New Zealand</option>
    	<option value="uk">United Kingdom</option>
    	<option value="usa">United States of America</option>
    </select>

    By the way, the script you linked to doesn't work on non IE browsers
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict dr_dumb99's Avatar
    Join Date
    Sep 2004
    Location
    Pakistan
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks for reply.
    Can you guide me for better Region-> Country related jsvscript.


    Thanks in advance

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The unobtrusive javascript way provides a manner to access the countries by region when there is no javascript. This means using optgroups to group them by region, then use javascript to create the regions list and populate the country list.

    I've picked the regions from wikipedias list of countries and made use of the geographic region codes

    Because there are a lot of countries I've used only five per region, but with the above resources you'll be able to easily come up with the rest. Here's the list of countries that we're going to start with.

    Code html4strict:
    <form id="myForm">
    	<select name="country">
    		<option value="" selected="selected">Select Country</option> 
    		<optgroup label="Africa">
    			<option value="DZ">Algeria</option> 
    			<option value="AO">Angola</option> 
    			<option value="BJ">Benin</option> 
    			<option value="BW">Botswana</option> 
    			<option value="BF">Burkina Faso</option> 
    		</optgroup>
    		<optgroup label="Asia">
    			<option value="AF">Afghanistan</option> 
    			<option value="AM">Armenia</option> 
    			<option value="AZ">Azerbaijan</option> 
    			<option value="BH">Bahrain</option> 
    			<option value="BD">Bangladesh</option> 
    		</optgroup>
    		<optgroup label="Europe">
    			<option value="AL">Albania</option> 
    			<option value="AD">Andorra</option> 
    			<option value="AT">Austria</option> 
    			<option value="BY">Belarus</option> 
    			<option value="BE">Belgium</option> 
    		</optgroup>
    		<optgroup label="North America">
    			<option value="AI">Anguilla</option> 
    			<option value="AG">Antigua And Barbuda</option> 
    			<option value="AW">Aruba</option> 
    			<option value="BS">Bahamas</option> 
    			<option value="BB">Barbados</option> 
    		</optgroup>
    		<optgroup label="South America">
    			<option value="AR">Argentina</option> 
    			<option value="BO">Bolivia</option> 
    			<option value="BR">Brazil</option> 
    			<option value="CL">Chile</option> 
    			<option value="CO">Colombia</option> 
    		</optgroup>
    		<optgroup label="Oceania">
    			<option value="AS">American Samoa</option> 
    			<option value="AU">Australia</option> 
    			<option value="CK">Cook Islands</option> 
    			<option value="FJ">Fiji</option> 
    			<option value="PF">French Polynesia</option> 
    		</optgroup>
    		<optgroup label="Antarctica">
    			<option value="AQ">Antarctica</option> 
    		</optgroup>
    	</select>
    </form>

    When the page loads we're going to create a region select list, move the countries out to a hiddenCountry list, and hide the countries as well. Once a region has been selected we can show the updated list of countries.

    At the end of the page, just before the </body> tag is the following script.

    Code javascript:
    var countries = document.getElementById('myForm').elements.country;
    var regions = createRegionsFromCountries('region');
    var hiddenCountries = createSelect('hiddenCountries');
    hide(hiddenCountries);
    countries.parentNode.insertBefore(regions, countries);
    countries.parentNode.appendChild(hiddenCountries);
    moveOptGroups(countries, hiddenCountries);
    hide(countries);

    Here's how we create the regions from the countries

    Code javascript:
    function createRegionsFromCountries(name) {
    	var el = createSelect('regions');
    	createOptionsfromOptGroup(el, countries);
    	el.onchange = updateCountriesByRegion;
    	return el;
    }
    function createOptionsfromOptGroup(dest, source) {
    	var els = source.getElementsByTagName('optgroup');
    	var el;
    	var i;
    	for (i = 0; i < els.length; i += 1) {
    		el = els[i];
    		dest.appendChild(createOption(el.label));
    	}
    	dest.insertBefore(createOption('Select Region'), dest.firstChild);
    	dest.selectedIndex = 0;
    }

    And after the regions have been created, we want to move them out of the existing countries list and into the hidden one.

    Code javascript:
    function moveOptGroups(source, target) {
    	var els = source.getElementsByTagName('optgroup');
    	var i;
    	for (i = els.length-1; i >= 0; i -= 1) {
    		target.appendChild(els[i]);
    	}
    }

    We're also going to want createOption and createSelect functions, along with some show and hide functions as well.

    Code javascript:
    function createOption(text, value) {
    	var el = document.createElement('option');
    	el.appendChild(document.createTextNode(text));
    	if (value > '') {
    		el.value = value;
    	}
    	return el;
    }
    function createSelect(name) {
    	var el = document.createElement('select');
    	el.name = name;
    	return el;
    }
    function show(el) {
    	el.style.display = '';
    }
    function hide(el) {
    	el.style.display = 'none';
    }

    When someone selects a region we'll want to remove any existing ones showing in the countries list, and add a new set of countries to it.

    Code javascript:
    function updateCountriesByRegion() {
    	var region = this.options[this.selectedIndex].value;
    	var els = hiddenCountries.getElementsByTagName('optgroup');
    	var el;
    	var i;
    	hide(countries);
    	for (i=0; i < els.length; i += 1) {
    		el = els[i];
    		if (el.label === this.value) {
    			removeOptGroups(countries);
    			countries.appendChild(el.cloneNode(true));
    			show(countries);
    		}
    	}
    }
    function removeOptGroups(el) {
    	var els = el.getElementsByTagName('optgroup');
    	var i;
    	for (i = els.length-1; i >= 0; i -= 1) {
    		el.removeChild(els[i]);
    	}
    }

    And there's you're working prototype for a country selector by region.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Oh yes, and finally, if you have the space available you may want to make the Region list always visible on the screen

    Code javascript:
    var regions = createRegionsFromCountries('region');
    regions.size = 8;

    And then you may want the country list to be placed nicely beside the regions, so we'll add an identifier to it

    Code html4strict:
    <select id="country" name="country">

    and tell the country list to sit neatly beside the region list

    Code css:
    select {
    	float: left;
    }

    And on it goes...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •