Bootstrap ile nasıl bir liste seçim kutusu (açılır liste) oluşturabilirim?

Kutunun dışında "normal" bir defacto açılır liste seçim kutusu oluşturmak için desteklediği herhangi bir şey var mı? Yani, açılır kutu bir değerler listesidir ve seçilirse liste kutusunun içeriğini doldurur mu?

Bu işleve benzer bir şey mi var?

http://bootstrapformhelpers.com/select/

Bootstrap 3, .form-controlform bileşenlerini biçimlendirmek için sınıfı kullanır .

<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

Başka bir seçenek, Bootstrap açılır menüsünün jQuery kullanarak bir seçim gibi davranmasını sağlamaktır ...

$(".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

Skelly'nin güzel ve kolay cevabı şimdi Bootstap'taki açılır sözdizimindeki değişikliklerle modası geçmiş. Bunun yerine şunu kullanın:

$(".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>');
});

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

Başka bir seçenek bootstrap select kullanmak olabilir . Kendi sözleriyle:

Normal Bootstrap seçimleri gibi davranacak şekilde tasarlanmış, düğme açılır menüsünü kullanarak Bootstrap için özel bir seçim / çoklu seçim.

.Form-control kullanmadan başka bir yol şudur:

  $(".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>

Ben'in kodu, üst div'in form-grup sınıfına sahip olmasını gerektirir (btn-group kullanıyordum), bu sadece en yakın div'ı arayan ve hatta biraz daha hızlı olabilecek biraz farklı bir sürümdür.

$(".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-controlharika ama düğme ve ul seçeneği ile açılır menüyü sevenler veya ihtiyaç duyanlar için güncellenmiş kod. Ben karma bağlantı atlama ve seçimden sonra açılır kapanış düzeltmek için Steve tarafından kodu düzenledim.

Steve, Ben ve Skelly'ye teşekkürler!

$(".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;
});

Şu anda açılır listelerle savaşıyorum ve deneyimlerimi paylaşmak istiyorum:

Belirli durumlar vardır <select>Kullanılamayan ve açılır menü ile 'taklit edilmesi' gereken .

Örneğin, açılır menü düğmeleri olan önyükleme girdi grupları oluşturmak istiyorsanız (bkz. Http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Ne yazık ki <select>girdi gruplarında desteklenmiyor, düzgün oluşturulmayacak.

Yoksa kimse bunu çözdü mü? Çözümle çok ilgilenirim.

Ve daha da karmaşık hale getirmek için bu kadar basit kullanamazsınız $(this).text() , açılır liste içeriği olarak glifonlar veya font müthiş simgeleri kullanıyorsanız açılır menüde seçilen kullanıcının yakalamak . Örneğin: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> Bu durumda metin olmadığından ve biraz ekleyecekseniz, açılır menüde de görüntülenir ve bu istenmeyen bir durumdur.

İki olası çözüm buldum:

1) $(this).html()Seçilen <li>öğenin içeriğini almak ve ardından incelemek için kullanın, ancak böyle bir şey elde edersiniz<a href="#0"><i class="fa fa-minus"></i></a> ihtiyacınız olanı çıkarmak için bununla oynamanız gerekir.

2) Kullanım $(this).text()ve gizli süre içinde eleman metni gizlemek: <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. Benim için bu basit ve zarif bir çözüm, ihtiyacınız olan herhangi bir metni koyabilirsiniz, metin gizlenecek ve herhangi bir dönüşüm yapmanıza gerek yok $(this).html() olanı elde etmek için seçenek 1) 'de olduğu gibi sonuçların yapmanız gerekmez.

Umarım açıktır ve birine yardım edebilir :-)