如何将图像放在php的下拉行中

时间:2019-03-18 08:48:07

标签: php html-select

我正在尝试将国家/地区标志放在相应的国家/地区代码的前面,例如gmail注册:

enter image description here

我尝试使用img srcbackground,但是图像不可见。我在mysql中有一个带有ISO,国家名称,代码的表。我正在尝试使用https://ipdata.co/flags api来填充标志。 我的代码:

<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>

1 个答案:

答案 0 :(得分:1)

您可以使用this jquery插件并用您的数据替换:

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