在引導中使用帶有文本字段的降級

我有一個使用引導程序3的應用程序。我想讓用戶在磅和千克之間動態轉換。我想默認爲磅。當用戶選擇另一個選項時，我希望操作文本成爲所選選項的文本。我不知道如何做到這一點。目前，我有以下幾點：在引導中使用帶有文本字段的降級

<div class="input-group"> 
    <input type="text" class="form-control"> 
    <div class="input-group-btn"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
     <li><a href="#">Pounds</a></li> 
     <li><a href="#">Kilograms</a></li> 
    </ul> 
    </div> 
</div>

我懷疑我需要使用onclick的磅和公斤選項。然而，我不知道如何讓下拉文本實際上是選項，而不是總是說「行動」

來源

2015-03-13 xam developer

如果你不想離開頁面，一個'select'輸入元素可能更適合。「dropdown」需要在其菜單中顯示鏈接的事實告訴你，它是專門爲瀏覽頁面而設計的。 – 2015-03-13 14:27:21

我想應該有一個簡單的方法，但我沒有找到它official documentation。

同時，如你所說，你可以使用一些jQuery的/ JavaScript的使用onclick事件更新按鈕的值：

$(".input-group-btn .dropdown-menu li a").on("click", function() { 

    // go up to the li, ul, and div, and then find the button (a bit "hacky", I know) 
    $(this).parent().parent().parent().find(".dropdown-toggle").html($(this).text() + ' <span class="caret">'); 

});

你可以看到它在這裏與您的代碼的工作：http://jsfiddle.net/uvkcoybL/

來源

2015-03-13 13:49:19

在引導中使用帶有文本字段的降級

回答

相關問題