Countries dropdown with flags
I've made an image dropdown. So I thought it can be used for a great purpose. Countries dropdown with flags. Right?
Well, here we goes. If you don't want to go in technical etc just download it from the bottom links.
Please note: Verify the country flag. Its downloaded from http://code.google.com/p/csscountrycodes/.
Features:
- Auto Complete
- Flag with each country name
- Value has short code
- Auto-scroll to the value if not visible
Demo:
Setup:
//script in header
<script src="js/jquery/jquery-1.8.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />
<script src="js/msdropdown/jquery.dd.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/msdropdown/flags.css" />
HTML part:
Its not a full list. Just for an example.
<select name="countries" id="countries" style="width:300px;">
<option value='ad' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag ad" data-title="Andorra">Andorra</option>
<option value='ae' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag ae" data-title="United Arab Emirates">United Arab Emirates</option>
<option value='af' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag af" data-title="Afghanistan">Afghanistan</option>
<option value='ag' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag ag" data-title="Antigua and Barbuda">Antigua and Barbuda</option>
<option value='ai' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag ai" data-title="Anguilla">Anguilla</option>
<option value='al' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag al" data-title="Albania">Albania</option>
<option value='am' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag am" data-title="Armenia">Armenia</option>
<option value='an' data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag an" data-title="Netherlands Antilles">Netherlands Antilles</option>
</select>
Finally:
<script>
$(document).ready(function() {
$("#countries").msDropdown();
})
</script>