javascript - 下拉列表未显示在 Bootstrap 输入组中

Question

我似乎无法使下拉菜单正常工作。当您点击“操作”时，什么也没有发生。

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

Answer 1

您正在尝试使用 bootstrap 下拉菜单作为选择输入。下拉菜单应该只是调用一些 Action ，而不是像“选择”元素那样表现。所以没有你想要的开箱即用的功能。你必须有一些 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}`
}

代码笔:https://codepen.io/anon/pen/KWdOxa

但是您仍然需要以某种方式保存选定的值，以使您的计算在 JS 代码中正确。

所以你最好使用一个特殊的 Bootstrap 元素来选择输入 - https://silviomoreto.github.io/bootstrap-select/