Bootstrap下拉列表作为选择选项

Question

如何使引导下拉列表像HTML选择一样？我最近有这个问题。我部分认为Bootstrap在核心库中缺少此功能，但团队必须有理由不将其包含在库中。

这是我第一次docs。如果这不是一个问题，我很抱歉。

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（）;

这将使引导程序下拉的行为与<select> <option>元素相同。按钮文字将更改为您点击的最后一项。

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

$（ELEM）.dropdownVal（）;

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

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

页面加载时自动转换为Bootstrap样式下拉列表

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

演示

＆＃13;

＆＃13;

$.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");
  });
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;