Drop-down not showing on Bootstrap input-group

Question

I can't seem to make the drop-down work. When you click on 'action' nothing happens.

I double-checked the CSS and JS links and all seems ok, tried with Bootstrapv4 and 3.3.7 and none works. Any thoughts?

Check my app 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

You are trying to use bootstrap dropdown as a select input. Dropdowns are supposed to just call some actions, not behave like "select" elements. So there is no such functionality out of the box as you want. You have to have some JS to make it work.

So my very quick and dirty solution just to make it work:

1) Assign id="selected" to currently selected value:

<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) Assign onclick handler on dropdown items:

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

3) And this handler could be like this:

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

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

But you still have to save somehow a selected value to make your calculations proper in JS code.

So you had better use a special bootstrap element for select inputs - https://silviomoreto.github.io/bootstrap-select/