引导程序输入组中未显示下拉列表

我似乎无法完成下拉工作。当你点击'行动'时，没有任何反应。引导程序输入组中未显示下拉列表

我仔细检查了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

引导程序输入组中未显示下拉列表

回答

相关问题