1

I am trying to put countries flag infront of there respective country code likein gmail registration something like this:

enter image description here

I tried with img src and background but images are not visible.I have a table in mysql with ISO,country name,code. I am trying to use https://ipdata.co/flags api to populate flag. My code:

<select Emp Name='NEW'>
        <option value="">--- Select ---</option>
                 <?
            $list=mysqli_query($con,"select * from country");
        while($row_list=mysqli_fetch_assoc($list)){
            $display="+".$row_list['phonecode']."-".$row_list['name'];
            $flag=$row_list['isosmall'];
            ?>
            <option style="background-image:url(https://ipdata.co/flags/<?php echo $flag;?>.png);"></option>
               // <option value="<img src="https://ipdata.co/flags/<?php echo $flag;?>.png"/></option>
               // <? echo $display; ?>"</option><? if($row_list['iso']==$select){ echo "selected"; } ?>
                                    // <?//echo $row_list['name'];
                                     //echo $display;?>
                </option>
            <?
            }
               ?>
        </select>
mark
  • 623
  • 3
  • 21
  • 54
  • Just as a matter of best practices, you really shouldn't put your query inside your HTML like that. Also, are you getting anything back or is it just the flags missing? – Difster Mar 18 '19 at 08:51
  • I am getting blank dropdown, as I am just populating flags. If I echo `$display` it shows code and country like `+91-India` – mark Mar 18 '19 at 08:53
  • Possible duplicate of [How to add images in select list?](https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list) – Anurag Srivastava Mar 18 '19 at 08:55
  • 1
    are you sure that $flag contains what value you are expecting. and i found one bug that you have forggoten to commet at the last section – MjM Mar 18 '19 at 08:56
  • What about jquery plugin ? – MorganFreeFarm Mar 18 '19 at 08:56
  • @AnuragSrivastava yes possibly but it doesnt tells me how to use img scr or URL as image – mark Mar 18 '19 at 09:00
  • @MorganFreeFarm thanks for pointing, fixed but still same – mark Mar 18 '19 at 09:01
  • @mark i'm asking you "what about jquery plugin" .. Have you ever thought of using a jquery plugin? – MorganFreeFarm Mar 18 '19 at 09:04
  • @MorganFreeFarm could you point me to an example ? how to use it – mark Mar 18 '19 at 09:08

1 Answers1

1

You can do it with this jquery plugin and replace with your data:

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
</head>
<body>
<select class="country" name="wcpbc-manual-country" id="country">
        <option value="AU" data-iconurl="https://aus.merchnow.com/img/location-aus.png">AU some text</option>
        <option value="IN" data-iconurl="https://images0.voylla.com/flags/inr.gif">IN some text</option>
</select>
</body>
</html>

JS:

 $("#country").selectBoxIt();

JSFiddle example

MorganFreeFarm
  • 3,811
  • 8
  • 23
  • 46