Bootstrap contiene gli stili per creare bottoni con una freccia sulla destra. Al click della freccia viene mostrata una lista di link che possiamo personalizzare secondo le nostre esigenze. Questo comportamento visuale è del tutto assimilabile a quello di una classica dropdown, quindi possiamo usare gli stili di Bootstrap per creare una dropdown personalizzata.
Il codice sottostante mostra come creare la drop down.

<div class="btn-group">
  <button type="button" class="btn btn-default" 
    id="itemTypeDescription">Select</button>
  <button type="button" class="btn btn-default dropdown-toggle" 
    data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="javascript:;">Item1</li>
    <li><a href="javascript:;">Item2</li>
    <li><a href="javascript:;">Item3</li>
  </ul>
</div>

Il primo bottone mostra il testo dell'elemento selezionato, mentre il secondo mostra la freccia della dropdown. Il tag ul contiene invece la lista degli elementi da mostrare nella dropdown.
Una volta disegnata la dropdown, dobbiamo gestire il click sui link della lista per cambiare il testo del primo bottone con quello del lik selezionato. Il prossimo esempio di codice mostra come fare.

$(".dropdown-menu a").on("click", function () {
  $("#itemTypeDescription").html($(this).html());
});