引导下拉菜单作为选择选项

Question

如何让引导下拉菜单像 HTML 选择选项一样？我最近遇到了这个问题。我部分认为 Bootstrap 在核心库中缺少此功能，但团队未将其包含在库中一定有他们的理由。

这是我第一次posting a Q&A question。如果这看起来不像是个问题，我很抱歉。

Answer 1

以下是扩展方法：

$.fn.extend({
    dropdownConvert: function(b) {
        b = b || true;
        console.log(b);
        this.each(function(){
            var $this = $(this);
            if ($this.prop("tagName") == "SELECT" && typeof $this.attr("id") == "string" && $this.find("option").length > 0) {
                var temp = '<div class="dropdown" id="' + $this.attr("id") + '"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="selected">' + $this.find("option")[0].innerHTML + '</span> <span class="caret"></span></button><ul class="dropdown-menu">';
                var o = $this.find("option");
                for (var i = 0; i < o.length; i++) {
                    temp += '<li><a>' + o[i].innerHTML + '</a></li>';
                }
                temp += '</ul></div>';
                $this[0].outerHTML = temp;
                if (b)
                    $("#"+$this.attr("id")).dropdown();
            }
        });
    },
    dropdown: function(cb) {
        console.log($(this));
        this.each(function(){
            var $drop = $(this);
            $drop.find("a").bind("click", function(){
                var selected = $(this).text();
                $drop.find(".selected").text(selected);
                $drop.attr("data-selected", selected.toLowerCase());
                if (typeof cb === "function") {
                    cb.call($drop, selected.toLowerCase());
                }
            })
        });
        return this;
    },
    dropdownVal: function(v) {
        var $drop = $(this).first();
        if($drop.hasClass("dropdown")) {
            if (v !== undefined) {
                v = String(v);
                var c = String(v+" ")[0].toUpperCase() + v.substring(1,v.length);
                $drop.attr("data-selected", v);
                $drop.find(".selected").text(c);
            } else {
                if ($drop.data("selected") !== undefined) {
                    return $drop.attr("data-selected");
                } else {
                    return $drop.find(".selected").text();
                }
            }
        } else {
            return undefined;
        }
    }
});

$(elem).dropdownConvert();

这会将您的 <select> <option> 元素转换为引导下拉菜单。 元素必须有id，否则函数将无法正常运行。

参数：b：布尔值，默认 - true。设置为 false 以阻止元素附加下拉单击事件。如果未设置，代码将在转换后运行$(elem).dropdown()。

$(elem).dropdown();

这将使 bootstrap downdowns 表现为 <select> <option> 元素。按钮文本将更改为您单击的最后一项。

参数：cb：函数。这是回调函数。 cb() 的调用参数是选中的项目。

$(elem).dropdownVal();

这类似于输入元素的$(elem).val()。所选项目将返回。 $(elem).dropdown() 需要在调用此方法之前运行。

参数：value: 将被转换为文本。如果参数不是undefined，它会将当前选择的选项设置为提供的值，而不管它是否是选择中的默认选项之一。将其留空将返回所选值。

---

页面加载时自动转换为 Bootstrap 样式的下拉菜单

$(function(){
    $("select").dropdownConvert();
})

---

演示

$.fn.extend({
    dropdownConvert: function(b) {
        b = b || true;
        console.log(b);
        this.each(function(){
            var $this = $(this);
            if ($this.prop("tagName") == "SELECT" && typeof $this.attr("id") == "string" && $this.find("option").length > 0) {
                var temp = '<div class="dropdown" id="' + $this.attr("id") + '"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="selected">' + $this.find("option")[0].innerHTML + '</span> <span class="caret"></span></button><ul class="dropdown-menu">';
                var o = $this.find("option");
                for (var i = 0; i < o.length; i++) {
                    temp += '<li><a>' + o[i].innerHTML + '</a></li>';
                }
                temp += '</ul></div>';
                $this[0].outerHTML = temp;
                if (b)
                    $("#"+$this.attr("id")).dropdown();
            }
        });
    },
    dropdown: function(cb) {
        console.log($(this));
        this.each(function(){
            var $drop = $(this);
            $drop.find("a").bind("click", function(){
                var selected = $(this).text();
                $drop.find(".selected").text(selected);
                $drop.attr("data-selected", selected.toLowerCase());
                if (typeof cb === "function") {
                    cb.call($drop, selected.toLowerCase());
                }
            })
        });
        return this;
    },
    dropdownVal: function(v) {
        var $drop = $(this).first();
        if($drop.hasClass("dropdown")) {
            if (v !== undefined) {
                v = String(v);
                var c = String(v+" ")[0].toUpperCase() + v.substring(1,v.length);
                $drop.attr("data-selected", v);
                $drop.find(".selected").text(c);
            } else {
                if ($drop.data("selected") !== undefined) {
                    return $drop.attr("data-selected");
                } else {
                    return $drop.find(".selected").text();
                }
            }
        } else {
            return undefined;
        }
    }
});
$(function(){
  $("select").dropdownConvert();
  $("#t-1").click(function(){
    $("#result").text($("#v-1").dropdownVal());
  });
  $("#t-2").click(function(){
    $("#v-1").dropdownVal("melon");
  });
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<h1>This is a select option:</h1>
<select id="v-1">
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
</select>
<button type="button" id="t-1">What is the selected option?</button>
<button type="button" id="t-2">Set value to "melon"</button>
<p id="result"></p>