[英]Bootstrap Dropdown selected item
我最近開始使用Bootstrap,正在研究下拉菜單功能。
我不知道是否缺少某些內容,但我本以為下拉菜單按鈕應該顯示已選擇的內容。 例如,如果我有以下下拉列表
Select Item <---This is the button
-Item 1 <---This is the item
-Item 2 <---This is the item
-Item 3 <---This is the item
如果用戶選擇“項目1”,那么我希望按鈕文本更改為“項目1”,以便用戶知道所選擇的內容,而在我的下拉菜單中,當用戶單擊該項目時,下拉菜單將關閉,文本不會沒改變。 這似乎應該發生一些基本的事情,所以我認為我缺少了一些東西,但是Bootstrap網站上的示例似乎也顯示了同樣的事情,事實上它做到了這一點,我看不到下拉菜單的意義。
當對此進行谷歌搜索時,唯一的實現似乎是冗長的javascript來完成我期望發生的事情,這是正確的還是我在某個地方缺少什么?
根據描述,所需的功能是一個選擇框。 引導下拉列表更適合折疊列表(請考慮導航欄)。
您可以使用bootstrap-select之類的插件,也可以編寫自己的功能(我建議您編寫功能)。
這是一個模擬選擇框的小樣機: https : //jsfiddle.net/eanzfcu1/
基本上,您只是在監聽列表中li
項的onclick
,然后將ul
文本更改為li
的內容。
Bootstrap下拉菜單用於導航/菜單,其樣式與其他按鈕一致。
如果您希望它具有“選擇”行為,則實際上並不是很多“冗長的javascript”。 只需幾行jQuery即可將其連接::
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle')
.html(selText+' <span class="caret"></span>');
});
http://www.codeply.com/go/Msi58Gy11u
OFC,對於“選擇”行為,選擇輸入也始終存在。
聽起來好像您正在尋找插件。 我真的很喜歡bootstrap-multiselect。
這是它的鏈接。
http://davidstutz.github.io/bootstrap-multiselect/
我復制粘貼下面的簡單示例之一,只運行代碼片段
$(document).ready(function() { $('#example-getting-started').multiselect(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <select id="example-getting-started" > <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.