Country Selector with Flags with jQuery

Question

I want to populate my dropdown list with countries and relevant flags. I went through this question.

Html Country List with flags

But still can't understand because the working model is broken. How to do this?

Answer 1

Are you using bootstrap? If so, there is a very interesting form helper in the below link

http://www.freenetmall.com/common/jquery/FormHelpers/docs/country.html

The sample HTML snippet that will cater to your situation is;

 <div class="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
      <input type="hidden" value="">
      <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
        <span class="bfh-selectbox-option input-medium" data-option=""></span>
        <b class="caret"></b>
      </a>
      <div class="bfh-selectbox-options">
        <input type="text" class="bfh-selectbox-filter">
        <div role="listbox">
        <ul role="option">
        </ul>
        </div>
      </div>
    </div>

If this doesn't help, please provide more information on whether you are storing the flags in DB and want to list them in your drop-down box, etc? More information on the approach would be appreciated.

Answer 2

And here's a searchable dropdown based on select2:

$(function() {
  var isoCountries = [
    { id: 'AF', text: 'Afghanistan'},
    { id: 'AX', text: 'Aland Islands'},
    { id: 'AL', text: 'Albania'},
    { id: 'DZ', text: 'Algeria'},
    { id: 'AS', text: 'American Samoa'},
    // etc
  ];

  function formatCountry (country) {
    if (!country.id) { return country.text; }
    var $country = $(
      '<span class="flag-icon flag-icon-'+ country.id.toLowerCase() +' flag-icon-squared"></span>' +
      '<span class="flag-text">'+ country.text+"</span>"
    );
    return $country;
  };

  //Assuming you have a select element with name country
  // e.g. <select name="name"></select>

  $("[name='country']").select2({
    placeholder: "Select a country",
    templateResult: formatCountry,
    data: isoCountries
  });

});

jsFiddle