Làm cách nào tôi có thể kết xuất hộp chọn danh sách (thả xuống) bằng bootstrap?

Có bất cứ điều gì ngoài hộp mà bootstrap hỗ trợ để hiển thị hộp chọn danh sách thả xuống "chính quy" không? Đó là, nơi hộp thả xuống là danh sách các giá trị và nếu được chọn sẽ điền vào nội dung của hộp danh sách?

Một cái gì đó tương tự như chức năng này?

http://bootstrapformhelpers.com/select/

Bootstrap 3 sử dụng .form-controllớp để tạo kiểu thành phần.

<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

Một tùy chọn khác là làm cho trình đơn thả xuống Bootstrap hoạt động giống như một lựa chọn sử dụng 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

Câu trả lời dễ dàng và tốt đẹp của Skelly hiện đã lỗi thời với những thay đổi đối với cú pháp thả xuống trong Bootstap. Thay vì sử dụng cái này:

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

Kiểm tra: 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%;}

Một tùy chọn khác có thể là sử dụng bootstrap chọn . Về lời nói của họ:

Một lựa chọn / đa lựa chọn cho Bootstrap tùy chỉnh bằng cách sử dụng nút thả xuống, được thiết kế để hoạt động giống như các lựa chọn Bootstrap thông thường.

Một cách khác mà không sử dụng điều khiển .form là:

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

Mã của Ben yêu cầu div cha phải có lớp nhóm biểu mẫu (tôi đang sử dụng btn-group), đây là phiên bản hơi khác, chỉ tìm kiếm div gần nhất và thậm chí có thể nhanh hơn một chút.

$(".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-controlrất tuyệt nhưng đối với những người yêu thích hoặc cần thả xuống với tùy chọn nút và ul, đây là mã được cập nhật. Tôi đã chỉnh sửa mã của Steve để sửa lỗi nhảy đến liên kết băm và đóng trình đơn thả xuống sau khi chọn.

Cảm ơn Steve, Ben và 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;
});

Tôi hiện đang chiến đấu với những lần thả xuống và tôi muốn chia sẻ kinh nghiệm của mình:

Có những tình huống cụ <select>thể không thể được sử dụng và phải được 'mô phỏng' với trình đơn thả xuống.

Ví dụ: nếu bạn muốn tạo các nhóm đầu vào bootstrap, như Nút có thả xuống (xem http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Thật không may, <select>không được hỗ trợ trong các nhóm đầu vào, nó sẽ không được hiển thị đúng.

Hay có ai đã giải quyết điều này rồi? Tôi sẽ rất quan tâm đến giải pháp.

Và để làm cho nó phức tạp hơn nữa, bạn không thể sử dụng một cách đơn giản $(this).text()để nắm bắt những gì người dùng đã chọn trong danh sách thả xuống nếu bạn đang sử dụng glypicons hoặc phông chữ biểu tượng tuyệt vời làm nội dung cho thả xuống. Ví dụ: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> Bởi vì trong trường hợp này không có văn bản và nếu bạn sẽ thêm một số thì nó cũng sẽ được hiển thị trong phần tử thả xuống và điều này là không mong muốn.

Tôi tìm thấy hai giải pháp khả thi:

1) Sử dụng $(this).html()để lấy nội dung của <li>phần tử đã chọn và sau đó kiểm tra phần tử đó, nhưng bạn sẽ nhận được một cái gì đó giống như <a href="#0"><i class="fa fa-minus"></i></a>vậy nên bạn cần chơi với phần này để trích xuất những gì bạn cần.

2) Sử dụng $(this).text()và ẩn văn bản trong thành phần trong khoảng ẩn : <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. Đối với tôi đây là giải pháp đơn giản và thanh lịch, bạn có thể đặt bất kỳ văn bản nào bạn cần, văn bản sẽ bị ẩn và bạn không cần thực hiện bất kỳ chuyển đổi $(this).html()kết quả nào như trong tùy chọn 1) để có được những gì bạn cần.

Tôi hy vọng nó rõ ràng và có thể giúp ai đó :-)