2

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()">


<?php

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

foreach($rows as $row){ 

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

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

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

</select>
</form>
</div>

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.

3

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();
$doc->addScriptDeclaration('
  jQuery(document).ready(function($) {
    $("#country").msDropdown();
  })
');

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.

| improve this answer | |
  • 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 Jan 29 '15 at 15:19
  • If I rightly remember, JHtml::script was the older method. I'll get this confirmed tonight though – Lodder Jan 29 '15 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 Jan 29 '15 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 Jan 29 '15 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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