5

Mặc dù tôi có thể thực hiện công việc khởi động nhiều tác vụ này trong tệp độc lập, tôi không thể xem danh sách thả xuống khi tôi nhấp vào dấu mũ, ngay cả khi tôi đưa nó vào tệp cổng.Trình đơn thả xuống nhiều lựa chọn Bootstrap không hiển thị được

Tôi đã sử dụng bootstrap-datepicker, DateTimePicker, lựa chọn, và backbone.js

Đây là dòng mà là nghĩa vụ phải làm các trick

$('.insightList').multiselect({ 
      selectAllText: true 
}); 

Có ai có một ý tưởng về những gì có thể là nguyên nhân cho việc không thêm lớp 'mở' cho 'btn-group'?

! [On nhấp chuột cũng chỉ có btn nhóm lớp cho div liệu có nên thêm lớp mở] [1] Cảm ơn trước

+3

Bạn có thể tạo ra vấn đề của mình không ?? –

Trả lời

2

Tôi vừa tạo một jsbin để giải quyết vấn đề của bạn Working demo.

enter image description here

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery.min.js"></script> 
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 

<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script> 
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/> 

    <meta charset="utf-8"> 
    <title>Example by @Bneiluj</title> 
</head> 
<body> 

    <select id="insightList" multiple="multiple"> 
    <optgroup label="Group 1"> 
     <option value="1-1">Option 1.1</option> 
     <option value="2-1">Option 2.1</option> 
     <option value="2-2">Option 2.2</option> 
     <option value="2-3">Option 2.3</option> 
    </optgroup> 
    </select> 

<script id="example"> 
$('#insightList').multiselect({ 
    enableClickableOptGroups: true 
}); 
</script> 

Xin vui lòng, cho tôi biết nếu bạn có bất kỳ câu hỏi.

1

Đảm bảo cấu trúc HTML của bạn cho sách thả xuống như sau:

<select id="example-selectAllText" multiple="multiple" style="display: none;"> 
<option value="1">Option 1</option> 
<option value="2">Option 2</option> 
<option value="3">Option 3</option> 
<option value="4">Option 4</option> 
<option value="5">Option 5</option> 
<option value="6">Option 6</option> 
</select> 
<div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="multiselect-item multiselect-all"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" value="multiselect-all"> Check all!</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Option 1</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Option 2</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3"> Option 3</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="4"> Option 4</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="5"> Option 5</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="6"> Option 6</label></a></li></ul></div> 

$('#example-selectAllText').multiselect({ 
    includeSelectAllOption: true, 
    selectAllText: 'Check all!' 
}); 
0

Đây là đơn giản đa chọn đang cố gắng xây dựng với bootstrap cùng multiselect Tôi đã tải tất cả các jquery cần thiết và css nhưng vẫn còn đó hiển thị một hộp chọn hiển thị tất cả các tùy chọn mà nó đã không được đề xuất trong giải pháp trên.

<select id="multi-select" name="field" multiple="multiple" > 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
<!-- initialize multiselect --> 
<script> 
    $(document).ready(function() { 
     $('#mult-select').multiselect(); 
    }); 
</script><!-- //ends--> 
Các vấn đề liên quan