自定义 Bootstrap 下拉框

前面文章我们已经讨论了 Bootstrap 怎样实现模态框垂直居中和表单验证，本文将进一步探讨怎样自定义 Bootstrap 下拉框。

问题

下拉框在不同的浏览器会显示成不同的 UI，我们可以对其渐进增强，通常情况下用 select 和 option 元素设置数据再将其隐藏，然后用 div、span、ul、li 这些来替换渲染，这样不同的浏览器也会显示成统一的 UI 了。

解决办法

这样实现起来也不是那么容易的，如果我们的项目用到 Bootstrap，可以借助下拉菜单组件（dropdown）来简单自定义下拉框。

注意：下拉菜单组件不能反显当前的选项，这个功能需要增强。

直接上代码了：

• Html 代码：

<div class="col-sm-3 col-md-2">
  <div class="row dropdown">
    <button type="button" class="btn btn-default dropdown-toggle form-control"
      id="dropdownTitle" data-toggle="dropdown">
      <span data-bind="label">请选择</span> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownTitle">
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">JavaScript</a>
      </li>
      <li role="presentation" selected>
        <a role="menuitem" tabindex="-1" href="#">Flash</a>
      </li>
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">Ajax</a>
      </li>
      <li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">Silverlight</a>
      </li>
    </ul>
  </div>
</div>

• JavaScript 代码：

$(document.body).on('click', '.dropdown-menu li', function(event) {
  var target = $(event.currentTarget);
  target.closest('.dropdown')
    .find('[data-bind="label"]').text(target.text()).attr('title', target.text())
    .children('.dropdown-toggle').dropdown('toggle');
});

$('.dropdown-menu li').each(function() {
  if ($(this).attr('selected')) {
    $(this).trigger('click');
  }
});

参考

• 可以访问我的 github 的自定义 Bootstrap 下拉框示例。对于当前的选项我们为 li 元素扩展了 selected 属性。

登录后点击查看按钮查看最终效果。

• 如果你需要更复杂的功能，可以参看bootstrap-select，该第三方库支持更多功能设置。