Bagaimana cara membuat kotak pilih daftar (tarik-turun) dengan bootstrap?

Apakah ada sesuatu di luar kotak yang didukung bootstrap untuk membuat kotak pilih daftar drop-down defacto "biasa"? Yaitu, di mana kotak drop down adalah daftar nilai dan jika dipilih mengisi isi kotak daftar?

Sesuatu yang mirip dengan fungsi ini?

http://bootstrapformhelpers.com/select/

Bootstrap 3 menggunakan komponen .form-controlclass to style untuk membentuk.

<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

Pilihan lain adalah untuk membuat dropdown Bootstrap berperilaku seperti pilih menggunakan jQuery ...

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});

http://www.bootply.com/b4NKREUPkN

Jawaban Skelly yang bagus dan mudah sekarang sudah ketinggalan zaman dengan perubahan pada sintaks tarik-turun di Bootstap. Alih-alih gunakan ini:

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.form-group').find('button[data-toggle="dropdown"]').html(selText+' <span class="caret"></span>');
});

Uji: 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%;}

Pilihan lain bisa menggunakan pilih bootstrap . Dengan kata-kata mereka sendiri:

Select / multiselect kustom untuk Bootstrap menggunakan tombol dropdown, dirancang untuk berperilaku seperti memilih Bootstrap biasa.

Cara lain tanpa menggunakan .form-control adalah ini:

  $(".dropdown-menu li a").click(function(){
        $(this).parents(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>');
        $(this).parents(".btn-group").find('.btn').val($(this).data('value'));
      });

$(".dropdown-menu li a").click(function(){
  $(this).parents(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".btn-group").find('.btn').val($(this).data('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="btn-group">
  <button  type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Test <span class="caret"> </span>
  </button>
  <ul class="dropdown-menu">
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 2</a></li>
    <li><a href='#'>test 3</a></li>
  </ul>
</div>

Kode Ben mengharuskan div induk memiliki kelas bentuk-grup (saya menggunakan btn-grup), ini adalah versi yang sedikit berbeda yang hanya mencari div terdekat dan bahkan mungkin sedikit lebih cepat.

$(".dropdown-menu li a").click(function(){
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
});

Bootstrap3 .form-controlkeren tapi bagi mereka yang suka atau butuh drop-down dengan tombol dan opsi ul, di sini adalah kode yang diperbarui. Saya telah mengedit kode oleh Steve untuk memperbaiki lompatan ke tautan hash dan menutup drop-down setelah seleksi.

Terima kasih kepada Steve, Ben dan Skelly!

$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
    $(this).closest('.dropdown').removeClass("open");
    return false;
});

Saat ini saya sedang berjuang dengan dropdown dan saya ingin berbagi pengalaman saya:

Ada situasi khusus di mana <select> tidak dapat digunakan dan harus 'ditiru' dengan dropdown.

Misalnya jika Anda ingin membuat grup input bootstrap, seperti Tombol dengan dropdown (lihat http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Sayangnya <select>tidak didukung dalam kelompok input, itu tidak akan diberikan dengan benar.

Atau apakah sudah ada yang menyelesaikan ini? Saya akan sangat tertarik dengan solusinya.

Dan untuk membuatnya lebih rumit, Anda tidak dapat menggunakannya hanya $(this).text()untuk menangkap apa yang dipilih pengguna dalam dropdown jika Anda menggunakan glypicons atau ikon font yang luar biasa sebagai konten untuk dropdown. Sebagai contoh: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> Karena dalam hal ini tidak ada teks dan jika Anda akan menambahkan beberapa maka itu juga akan ditampilkan dalam elemen dropdown dan ini tidak diinginkan.

Saya menemukan dua solusi yang mungkin:

1) Gunakan $(this).html()untuk mendapatkan konten dari <li>elemen yang dipilih dan kemudian memeriksanya, tetapi Anda akan mendapatkan sesuatu seperti itu <a href="#0"><i class="fa fa-minus"></i></a>sehingga Anda perlu bermain dengan ini untuk mengekstrak apa yang Anda butuhkan.

2) Gunakan $(this).text()dan menyembunyikan teks dalam elemen dalam rentang tersembunyi: <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. Bagi saya ini adalah solusi sederhana dan elegan, Anda dapat meletakkan teks apa pun yang Anda butuhkan, teks akan disembunyikan, dan Anda tidak perlu melakukan transformasi $(this).html()hasil seperti pada opsi 1) untuk mendapatkan apa yang Anda butuhkan.

Saya harap ini jelas dan dapat membantu seseorang :-)