Question

我想显示<li>标签的图标，而不是选中时的文字。请看一下：http://jsfiddle.net/Zenko/PUAY7/4/

更新：解决方案已修复：http://jsfiddle.net/Zenko/PUAY7/12/

HTML

<section class="main">
<div class="wrapper-demo">
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">
        <span>Transport</span>
        <ul class="dropdown">
            <li><a href="#"><img src="https://cdn1.iconfinder.com/data/icons/finalflags/16/United-States-Flag.png" />classic mail</a></li>
            <li><a href="#">UPS Delivery</a></li>
            <li><a href="#">Private jet</a></li>
        </ul>
    </div>
</div>

JS

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li > a');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

$(function() {

    var dd = new DropDown( $('#dd') );

    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });

});

如果您查看我的jsfiddle，您可以看到选择项目时没有显示标志图标。非常感谢任何帮助。

Answer 1

更改此js代码，如。

obj.opts.on('click',function(){
     var opt = $(this);
     obj.val = opt.html();
     obj.index = opt.index();
     obj.placeholder.html(obj.val);
});

Answer 2

添加此css链接

  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Live Demo

如何使用javascript作为活动文本显示<img/>标记

2 个答案: