How can I render a list select box (dropdown) with bootstrap?
You can make a bootstrap select using the Dropdown component...
Bootstrap 5 (update 2021)
<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#" id="selectA">Select<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">Item I</a></li>
<li class="dropdown-item"><a href="#">Item II</a></li>
<li class="dropdown-item"><a href="#">Item III</a></li>
<li class="dropdown-item"><a href="#">Item IV</a></li>
</ul>
let links = document.querySelectorAll('.dropdown-item')
links.forEach(element => element.addEventListener("click", function () {
let text = element.innerText
document.getElementById('selectA').innerText = text
}))
Bootstrap 5
Original answer (Bootstrap 3)
Another option is to make the Bootstrap dropdown behave like a select using jQuery...
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});
Bootstrap 3
Test: http://jsfiddle.net/brynner/hkwhaqsj/6/
HTML
<div class="input-group-btn select" id="select1">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">One</span> <span class="caret"></span></button>
<ul class="dropdown-menu option" role="menu">
<li id="1"><a href="#">One</a></li>
<li id="2"><a href="#">Two</a></li>
</ul>
</div>
jQuery
$('body').on('click','.option li',function(){
var i = $(this).parents('.select').attr('id');
var v = $(this).children().text();
var o = $(this).attr('id');
$('#'+i+' .selected').attr('id',o);
$('#'+i+' .selected').text(v);
});
CSS
.select button {width:100%; text-align:left;}
.select .caret {position:absolute; right:10px; margin-top:10px;}
.select:last-child>.btn {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.selected {padding-right:10px;}
.option {width:100%;}
Another option could be using bootstrap select. On their own words:
A custom select / multiselect for Bootstrap using button dropdown, designed to behave like regular Bootstrap selects.
Bootstrap 3 uses the .form-control
class to style form components.
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
http://getbootstrap.com/css/#forms-controls