Twitter bootstrap 3 如何允许通过下拉菜单上的图标进行选择_Twitter Bootstrap 3_Font Awesome_Fuelux

Twitter bootstrap 3 如何允许通过下拉菜单上的图标进行选择

twitter-bootstrap-3

Twitter bootstrap 3 如何允许通过下拉菜单上的图标进行选择,twitter-bootstrap-3,font-awesome,fuelux,Twitter Bootstrap 3,Font Awesome,Fuelux,我正在使用fuelux和bootstrap通过下拉菜单创建一些不错的选择在下拉列表中，我通过font Aweasome放置图标。我已经设法使图标呈现良好，当选中时，图标将作为选中项包含我的问题是当我点击激活下拉列表中的图标时。选择发生，但设置为“无”。我必须单击下拉列表中图标周围的文本或空白有人知道如何解决这个问题吗下面是一个JS提琴，演示了这个问题： JSFIDLE中的代码如下所示： <div class="row"> <div class="col-md-

我正在使用fuelux和bootstrap通过下拉菜单创建一些不错的选择

在下拉列表中，我通过font Aweasome放置图标。我已经设法使图标呈现良好，当选中时，图标将作为选中项包含

我的问题是当我点击激活下拉列表中的图标时。选择发生，但设置为“无”。我必须单击下拉列表中图标周围的文本或空白

有人知道如何解决这个问题吗

下面是一个JS提琴，演示了这个问题：

JSFIDLE中的代码如下所示：

<div class="row">
    <div class="col-md-12">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-md-4 control-label" for="title">Title</label>
                <div class="col-md-6">
                    <input 
                      id="title" 
                      name="title" 
                      type="text" 
                      placeholder="Enter the title" 
                      class="form-control input-md"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label" for="icon">Icon</label>
                <div class="col-md-6 fuelux">
                    <div 
                      class="btn-group selectlist" 
                      data-initialize="selectlist" 
                      id="iconSelectlist">
                        <button 
                          class="btn btn-default dropdown-toggle" 
                          data-toggle="dropdown" 
                          type="button">
                          <span class="selected-label">
                              <a href="#"><i class="fa fa-users fa-lg"></i></a>
                          </span>
                          <span class="caret"></span>
                          <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li data-value="a">
                                <a href="#"><i class="fa fa-users fa-lg"></i> Users</a>
                            </li>
                            <li data-value="b">
                                <a href="#"><i class="fa fa-camera fa-lg"></i> Camera</a>
                            </li>
                        </ul>
                        <input 
                          class="hidden hidden-field" 
                          name="mySelectlist" 
                          readonly="readonly" 
                          aria-hidden="true" 
                          type="text"/>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

外部资源：

http://exacttarget.github.io/fuelux/assets/vendor/bootstrap/dist/css/bootstrap.min.css
http://exacttarget.github.io/fuelux/assets/vendor/fuelux/dist/css/fuelux.css
http://exacttarget.github.io/fuelux/assets/vendor/bootstrap/dist/js/bootstrap.js
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
http://www.fuelcdn.com/fuelux/3.0.2/js/fuelux.min.js

DTD：

标准化CSS：

true

正文标签：

<body class="fuelux">

jquery2.x（edge）

这是一个bug。以前，只有

应该与3.0.3版的master合并。啊，谢谢。我怀疑这是一个缺陷，因为进一步的测试表明，如果我使用3.0.0，它允许选择图标，只是没有在选择结果中显示图标。今天将进一步调查，看看是否存在缺陷。：-）
true

<body class="fuelux">