2014-05-14 32 views
25

Chúng tôi đang cố gắng triển khai lại biểu mẫu đăng ký của chúng tôi bằng trình khởi động. Biểu mẫu đăng ký của chúng tôi chứa danh sách thả xuống đại diện cho loại công ty. Tôi đã tìm kiếm trực tuyến rộng rãi nhưng tôi không thấy bất kỳ ví dụ nào trong đó đầu vào biểu mẫu sẽ là một menu thả xuống.Trình đơn thả xuống Bootstrap 3 chọn

Bootstrap cung cấp cho rất nhiều ví dụ về các trình đơn thả xuống liên quan đến các hành động khác nhau nhưng những gì tôi cần là đầu vào thả xuống. Tôi đã đưa ra hai giải pháp:

Đầu tiên:

<label>Type of Business</label> 
<select class="form-control"> 
    <option>small</option> 
    <option>medium</option> 
    <option>large</option> 
</select> 

Có một vấn đề ở đây: mặc dù bản thân hộp theo kiểu một cách chính xác trình đơn thả xuống tự nó không có phong cách áp dụng.

enter image description here

phiên bản thứ hai:

<div class="btn-group"> 
    <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     Select Business type <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">small</a></li> 
     <li><a href="#">medium</a></li> 
     <li><a href="#">large</a></li> 
    </ul> 
</div> 

Cái này có vẻ tốt đẹp:

enter image description here

nhưng đó là một nút. Khi một tùy chọn được chọn, tôi không muốn thực hiện bất kỳ hành động nào tôi muốn là thay đổi văn bản và liên kết lựa chọn với trường nhập tương ứng.

Cả hai cách tiếp cận này đều là sự lựa chọn sai cho hành động của tôi. Tôi từ chối tin rằng Bootstrap không chứa một thành phần chọn đơn thả xuống đơn giản được liên kết với một trường đầu vào.

Tôi đang thiếu gì? Hãy giúp tôi.

Trả lời

18

Nếu bạn muốn đạt được this chỉ giữ cho bạn nút thả xuống và tạo kiểu như hộp chọn. Mã số là here trở xuống.

.btn { 
    cursor: default; 
    background-color: #FFF; 
    border-radius: 4px; 
    text-align: left; 
} 

.caret { 
    position: absolute; 
    right: 16px; 
    top: 16px; 
} 

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { 
    background-color: #FFF;  
} 

.btn-group.open .dropdown-toggle { 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6) 
} 

.btn-group {width: 100%} 
.dropdown-menu {width: 100%;} 

Để thực hiện các công việc nút giống như một hộp lựa chọn, tất cả các bạn cần phải thêm là mã này nhỏ javascript:

$('.dropdown-menu a').on('click', function(){  
    $('.dropdown-toggle').html($(this).html() + '<span class="caret"></span>');  
}) 

Nếu bạn có multiple Dropdowns tùy chỉnh như thế này bạn có thể sử dụng mã javascript:

$('.dropdown-menu a').on('click', function(){  
    $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');  
}) 
+1

cho những người mới như tôi chắc chắn rằng jscript bên dưới nội dung html, Hoặc người nào khác họ có thể không hoạt động –

1

Danh sách thả xuống xuất hiện như vậy phụ thuộc vào trình duyệt của bạn là gì, vì không thể tạo kiểu này cho một số trình duyệt. Có vẻ như của bạn là IE9, nhưng trông sẽ hoàn toàn khác trong Chrome.

Bạn có thể tìm kiếm sử dụng một cái gì đó như thế này:

http://silviomoreto.github.io/bootstrap-select/

Cách này sẽ làm selectboxes của bạn ổn định hơn trình duyệt chéo.

19

Chúng tôi vừa chuyển trang web của mình sang bootstrap 3 và chúng tôi có một loạt các biểu mẫu ... không vui nhưng một khi bạn bị treo thì không quá tệ.

Đây có phải là những gì bạn đang tìm kiếm không? Demo Here

<div class="form-group"> 
    <label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label> 
    <div class="col-sm-6 col-md-4"> 
    <select id="company" class="form-control"> 
     <option>small</option> 
     <option>medium</option> 
     <option>large</option> 
    </select> 
    </div> 
</div> 
11

Bạn cũng có thể thêm lớp 'hoạt động' vào mục đã chọn.

$('.dropdown').on('click', '.dropdown-menu li a', function() { 
    var target = $(this).html(); 

    //Adds active class to selected item 
    $(this).parents('.dropdown-menu').find('li').removeClass('active'); 
    $(this).parent('li').addClass('active'); 

    //Displays selected text on dropdown-toggle button 
    $(this).parents('.dropdown').find('.dropdown-toggle').html(target + ' <span class="caret"></span>'); 
}); 

Xem jsfiddle example

4

Ive được tìm kiếm một danh sách thả xuống chọn tốt đẹp cho một thời gian bây giờ và tôi tìm thấy một trong những tốt. Vì vậy, im chỉ để lại nó ở đây. Gọi là bootsrap-select

here's liên kết này. kiểm tra xem nó ra. nó có trình đơn thả xuống có thể chỉnh sửa, trình đơn thả xuống kết hợp và hơn thế nữa. Và thật dễ dàng để thêm vào dự án của bạn.

Nếu liên kết chết chỉ tìm kiếm bootstrap-select bởi silviomoreto.github.io. Điều này tốt hơn vì thẻ chọn thông thường của nó là

3

Tôi muốn mở rộng câu trả lời của paulalexandru và đặt ở đây giải pháp hoàn chỉnh hoạt động chung với trình đơn khởi động và cập nhật nội dung của nút chính cũng như giá trị từ tùy chọn đã chọn.

Các thả xuống bootstrap được định nghĩa theo cách này:

<div class="btn-group" role="group"> 
    <button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle"> 
    Option 1 <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <li><a href="#" data-value="1">Option 1</a></li> 
    <li><a href="#" data-value="2">Option 2</a></li> 
    <li><a href="#" data-value="3">Option 3</a></li> 
    </ul> 
</div> 

bổ sung mã bootstrap thả xuống tiêu chuẩn, có data-value thuộc tính để lưu trữ các giá trị trong mỗi tùy chọn thả xuống (trong <a> phần tử).

Bây giờ mã JS. tôi crated chức năng có thể xử lý các Dropdowns:

function dropdownToggle() { 
    // select the main dropdown button element 
    var dropdown = $(this).parent().parent().prev(); 

    // change the CONTENT of the button based on the content of selected option 
    dropdown.html($(this).html() + '&nbsp;</i><span class="caret"></span>'); 

    // change the VALUE of the button based on the data-value property of selected option 
    dropdown.val($(this).prop('data-value')); 
} 

Và dĩ nhiên chúng ta cần thêm sự kiện nghe:

$(document).ready(function(){ 
    $('.dropdown-menu a').on('click', dropdownToggle); 
} 
0

Hãy thử điều này:

<div class="form-group"> 
    <label class="control-label" for="Company">Company</label> 
    <select id="Company" class="form-control" name="Company"> 
     <option value="small">small</option> 
     <option value="medium">medium</option> 
     <option value="large">large</option> 
    </select> 
</div> 
Các vấn đề liên quan