I have a selectbox in which options are coming from a module. Following is its code.

<div id="dropdown">
<form action="" method="post" name="country"><label for="country"></label>
<select id="country" name="country" onchange="this.form.submit()">


    $rows = Array('UAE', 'SA', 'OMAN');

foreach($rows as $row){ 

    if($row == $session->get('cont')){ 

        $isSelected = ' selected="selected"'; 
    else { 
        $isSelected = ''; 

    echo "<option ".$isSelected.">".$row."</option>";


Now I want to show country flags with each option. Please suggest if there is any java-script plugin which I can use or any other simple way.

1 Answer 1


Have you tried a search for country flag drop down jquery or similar? There are many options, personally I've used this jQuery plugin earlier. You should be able to integrate it with your existing code by editing the echo statement.

Basically, you have to load the included .js and .css files, and make sure jQuery is included in your template.

//include scripts in header. (Add jQuery if needed.)
JHtml::_('script', JUri::base() . 'path/to/your/files/jquery.dd.min.js');
JHtml::_('stylesheet', JUri::base() . 'path/to/your/files/dd.css', array(), true);
JHtml::_('stylesheet', JUri::base() . 'path/to/your/files/flags.css', array(), true);

//initiate the script
$doc = JFactory::getDocument();
  jQuery(document).ready(function($) {

Now modify your echo statement to something like this:

echo "<option ".$isSelected." value='".$row."' data-image='/path/to/your/files/blank.gif' data-imagecss='flag ".strtolower($row)."' data-title='".$row."'>".$row."</option>;

You might have to tweak the code a bit to work, I haven't tested it, but it's worth a shot.

Another alternative (might be easier) is the Country Picker jQuery plugin, but it uses a <div> element instead of a regular dropdown list, and you would have to edit your PHP loop.

Good luck.

  • Thanks for the edit, @Lodder, as usually I'd like to ask why... ;) Joomla Docs says JHtml::script(Juri::base() . 'path/to/your/files/jquery.dd.min.js');, you changed it to JHtml::_('script', JUri::base() . 'path/to/your/files/jquery.dd.min.js');, what's the difference?
    – johanpw
    Commented Jan 29, 2015 at 15:19
  • If I rightly remember, JHtml::script was the older method. I'll get this confirmed tonight though
    – Lodder
    Commented Jan 29, 2015 at 15:24
  • Ok so just found out that they are in fact the same, but your method is apparently slightly faster as it's doesn't go through as much processing. I've just simply used the JHtml::_('script' approach constantly but you can rollback the edit if you wish ;)
    – Lodder
    Commented Jan 29, 2015 at 18:44
  • Thanks for looking it up, it's good to know the difference, although it probably doesn't matter in this case.
    – johanpw
    Commented Jan 29, 2015 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.