在 <select> <option> 中添加图像的最佳方法 [重复]

Question

在<select> <option> 中添加图片的最佳方式实际上是什么？ 我需要在我的列表中添加国家标志。我使用 AngularJS 和 jQuery。 跨浏览器对我来说很重要。我尝试了background-image 和一些旧的 jquery 插件，但它在 Chrome 中不起作用。

那么如何在列表项中添加图像？任何帮助将不胜感激。

Answer 1

我认为这个插件会对你有所帮助 jquery-image-dropdown

或

你可以自己关注这篇文章Icons for Select Menu Options in HTML/CSS

或者

这是另一个演示

            $(".dropdown img.flag").addClass("flagvisibility");

            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });
                        
            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
            });
                        
            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }

            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });



                $(".dropdown img.flag").toggleClass("flagvisibility");
       

      body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
        .desc { color:#6b6b6b;}
        .desc a {color:#0092dd;}
        
        .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
        .dropdown dd { position:relative; }
        .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#5d4617;}
        .dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
        .dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
                        border:1px solid #d4ca9a; width:150px;}
        .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
        .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                          left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
        .dropdown span.value { display:none;}
        .dropdown dd ul li a { padding:5px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}
        
        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
        .flagvisibility { display:none;}

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <dl id="sample" class="dropdown">
        <dt><a href="#"><span>Please select the country</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/br.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">France<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/fr.png" alt="" /><span class="value">FR</span></a></li>
               
            </ul>
        </dd>
    </dl>
    <span id="result"></span>

Answer 2

考虑使用Selectize — 一个基于 jQuery 的库，它转换普通的选择元素并允许您嵌入图像和其他动态功能。

Answer 3

HTML 和 CSS 结合在一起：

<select>
  <option style="background-image:url(usa.png);">USA</option>
  <option style="background-image:url(uk.png);">UK</option>
  <option style="background-image:url(france.png);">France</option>
</select>

HTML

<select id="country">
  <option>USA</option>
  <option>UK</option>
  <option>France</option>
</select>

CSS

select#country option[value="USA"]   { background-image:url(usa.png);   }
select#country option[value="UK"] { background-image:url(uk.png); }
select#country option[value="France"] { background-image:url(france.png); }