Countries dropdown with flags

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>



AttachmentSize
country-dropdown.rar127.79 KB