引導程序輸入組中未顯示下拉列表

我似乎無法完成下拉工作。當你點擊'行動'時，沒有任何反應。引導程序輸入組中未顯示下拉列表

我仔細檢查了CSS和JS鏈接，看起來都不錯，用Bootstrapv4和3.3.7試過，沒有任何工作。有什麼想法嗎？

檢查我的應用程序https://codepen.io/thomasfaller/pen/NpGpPP

<iframe height='265' scrolling='no' title='XE.com WebApp' src='//codepen.io/thomasfaller/embed/NpGpPP/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/thomasfaller/pen/NpGpPP/'>XE.com WebApp</a> by Thomas Faller (<a href='http://codepen.io/thomasfaller'>@thomasfaller</a>) on <a href='http://codepen.io'>CodePen</a>.

來源

2017-02-28 Thomas Faller

您正在嘗試使用引導下拉作爲選擇輸入。下拉菜單應該只是調用一些操作，而不是表現得像「選擇」元素。所以沒有這樣的功能可以隨心所欲。你必須有一些JS來使它工作。

所以我非常快速和骯髒的解決方案只是爲了它的工作：

1）指定id="selected"到當前所選的值：

<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    <i class="fa fa-eur" aria-hidden="true" id="selected"></i> 
</button>

2）分配在下拉項目onclick處理程序：

<a class="dropdown-item" onclick="select('eur')"><i class="fa fa-eur" aria-hidden="true"></i></a>

3）而且這個處理程序可能是這樣的：

function select(currency) { 
    let selected = document.getElementById('selected'); 
    selected.className = `fa fa-${currency}` 
}

Codepen：https://codepen.io/anon/pen/KWdOxa

但你還是必須以某種方式保存所選的值，使你的計算中的JS代碼正確。

所以你最好使用一個特殊的自舉元素選擇輸入 - https://silviomoreto.github.io/bootstrap-select/

來源

2017-03-01 09:00:19 phts

引導程序輸入組中未顯示下拉列表

回答

相關問題