Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Zurück zur Übersicht
Bootstrap: Dropdowns als Select verwenden
#Tutorials#jQuery
Möchte man die Bootstrap Dropdowns als Html-Select verwenden, so kann man mit sich mit folgendem Markup/Javascript behelfen.
<div class="btn-group fakeSelect">
<input type="hidden" class="selectValue" value="2013">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="currentVal">2013</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-value="2013" href="#">2013</a></li>
<li><a data-value="2012" href="#">2012</a></li>
<li><a data-value="2011" href="#">2011</a></li>
<li><a data-value="2010" href="#">2010</a></li>
<li><a data-value="2009" href="#">2009</a></li>
<li><a data-value="2008" href="#">2008</a></li>
</ul>
</div>
$(".fakeSelect .dropdown-menu li a").click(function(e){
e.preventDefault();
var elem = $(this),
fakeSelect = elem.parents('.fakeSelect'),
val = elem.data('value');
fakeSelect.find('.currentVal').text(val);
fakeSelect.find('.selectValue').val(val);
});
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar