Bootstrap thả xuống nhiều lựa chọn với hộp kiểm

nhịp. multiselect-native-select { vị trí. khoảng} tương đối. multiselect-native-select select { đường viền. 0. quan trọng; . thẳng(0 0 0 0). quan trọng; . 1px. quan trọng; . -1px -1px -1px -3px. quan trọng; . ẩn giấu. quan trọng; . 0. quan trọng; . tuyệt đối. quan trọng; . 1px. quan trọng; . 50%; . 30px }. multiselect-container { vị trí. tuyệt đối; . không ai; . 0; . 0 }. multiselect-container. nhóm đầu vào { lề. 5px }. multiselect-container>li { đệm. 0 }. multiselect-container>li>a. nhãn nhiều lựa chọn { font-weight. 700 }. multiselect-container>li. nhãn nhóm nhiều lựa chọn { lề. 0; . 3px 20px 3px 20px; . 100%; . 700 }. multiselect-container>li. multiselect-group-clickable nhãn { con trỏ. con trỏ}. multiselect-container>li>a { đệm. 0 }. multiselect-container>li>a>nhãn { lề. 0; . 100%; . con trỏ; . 400; . 3px 0 3px 30px }. multiselect-container>li>a>nhãn. Đài,. multiselect-container>li>a>nhãn. hộp kiểm { lề. 0 }. multiselect-container>li>a>nhãn>input[type=checkbox] { lề-dưới. 5px }. nhóm btn>. nhóm btn. con thứ n(2)>. nhiều lựa chọn. btn { bán kính đường viền trên cùng bên trái. 4px; . 4px }. biểu mẫu nội tuyến. nhãn vùng chứa nhiều lựa chọn. hộp kiểm,. biểu mẫu nội tuyến. nhãn vùng chứa nhiều lựa chọn. đài phát thanh { đệm. 3px 20px 3px 40px }. biểu mẫu nội tuyến. multiselect-container li một nhãn. đầu vào hộp kiểm [loại=hộp kiểm],. biểu mẫu nội tuyến. multiselect-container li một nhãn. đầu vào radio[type=radio] { lề trái. -20px; . 0 }

/** * Đa lựa chọn Bootstrap (https. //github. com/davidstutz/bootstrap-multiselect) * * Giấy phép Apache, Phiên bản 2. 0. * Bản quyền (c) 2012 - 2015 David Stutz * * Được cấp phép theo Giấy phép Apache, Phiên bản 2. 0 ("Giấy phép"); . Bạn có thể lấy * bản sao của Giấy phép tại http. //www. apache. org/giấy phép/GIẤY ​​PHÉP-2. 0 * * Trừ khi được luật hiện hành yêu cầu hoặc được đồng ý bằng văn bản, phần mềm * được phân phối theo Giấy phép sẽ được phân phối trên CƠ SỞ "NGUYÊN TRẠNG", KHÔNG CÓ * BẢO ĐẢM HOẶC ĐIỀU KIỆN DƯỚI BẤT KỲ HÌNH THỨC nào, rõ ràng hay ngụ ý. Xem * Giấy phép để biết các quyền và giới hạn quản lý ngôn ngữ cụ thể * trong Giấy phép. * * Giấy phép 3 khoản BSD. * Bản quyền (c) 2012 - 2015 David Stutz * Bảo lưu mọi quyền. * * Việc phân phối lại và sử dụng ở dạng mã nguồn và dạng nhị phân, có hoặc không có sửa đổi *, được phép với điều kiện đáp ứng các điều kiện sau. * - Việc phân phối lại mã nguồn phải giữ lại thông báo bản quyền ở trên, * danh sách các điều kiện này và tuyên bố từ chối trách nhiệm sau đây. * - Các bản phân phối lại ở dạng nhị phân phải sao chép thông báo bản quyền ở trên, * danh sách các điều kiện này và tuyên bố từ chối trách nhiệm sau đây trong tài liệu * và/hoặc các tài liệu khác được cung cấp cùng với bản phân phối. * - Không được phép sử dụng tên của David Stutz cũng như tên của những người đóng góp cho nó * để xác nhận hoặc quảng bá các sản phẩm bắt nguồn từ phần mềm này mà không có * sự cho phép cụ thể trước bằng văn bản. * * PHẦN MỀM NÀY ĐƯỢC CUNG CẤP BỞI NHỮNG NGƯỜI GIỮ BẢN QUYỀN VÀ CÁC ĐÓNG GÓP "NGUYÊN TRẠNG" * VÀ BẤT KỲ BẢO ĐẢM NÀO RÕ RÀNG HAY NGỤ Ý, BAO GỒM NHƯNG KHÔNG GIỚI HẠN Ở, * CÁC BẢO ĐẢM NGỤ Ý VỀ KHẢ NĂNG BÁN VÀ TÍNH PHÙ HỢP CHO MỘT MỤC ĐÍCH CỤ THỂ * MỤC ĐÍCH KHÔNG ĐƯỢC TỪ CHỐI. TRONG MỌI TRƯỜNG HỢP NGƯỜI GIỮ BẢN QUYỀN HOẶC * NGƯỜI ĐÓNG GÓP PHẢI CHỊU TRÁCH NHIỆM PHÁP LÝ CHO BẤT KỲ THIỆT HẠI TRỰC TIẾP, GIÁN TIẾP, NGẪU NHIÊN, ĐẶC BIỆT, * ĐIỂN HÌNH HOẶC DỮ LIỆU (BAO GỒM NHƯNG KHÔNG GIỚI HẠN Ở * VIỆC MUA HÀNG HÓA HOẶC DỊCH VỤ THAY THẾ; MẤT SỬ DỤNG, DỮ LIỆU, . */. function ($) { "dùng nghiêm ngặt"; // jshint ;_; . == 'không xác định' && ko. ràng buộcHandlers &&. ko. ràng buộcHandlers. nhiều lựa chọn) { ko. ràng buộcHandlers. nhiều lựa chọn = { sau. ['tùy chọn', 'giá trị', 'tùy chọn đã chọn', 'bật', 'tắt'], init. function(element, valueAccessor, allBindings, viewModel, bindingContext) { var $element = $(element); . toJS(valueAccessor()); . đa lựa chọn (cấu hình); . has('options')) { var options = allBindings. get('tuỳ chọn'); . isObservable(options)) {ko. tính toán ({ đọc. hàm () { tùy chọn (); . dữ liệu ('nhiều lựa chọn'); . updateOriginalOptions();//Không chắc điều này có lợi như thế nào. phần tử $. multiselect('xây dựng lại'); . thành phần }); . // Cần một số cách để biết liệu chúng được kích hoạt do chúng tôi hay do thay đổi bên ngoài. // Nó không lặp nhưng tốn công xử lý. nếu (tất cảBindings. has('value')) { var value = allBindings. nhận ('giá trị'); . isObservable(value)) {ko. tính toán ({ đọc. hàm () { giá trị (); . chọn nhiều ('làm mới'); . thành phần }). gia hạn ({ rateLimit. 100, thông báo WhenChangesStop. thật }); . // Không chắc hiệu suất có tốt hơn khi sử dụng 'select' và 'deselect'. nếu (tất cảBindings. has('sSelectedOptions')) { var selectOptions = allBindings. get('SelectedOptions'); . isObservable (đã chọnOptions)) { ko. tính toán ({ đọc. function() { tùy chọn đã chọn(); . chọn nhiều ('làm mới'); . thành phần }). gia hạn ({ rateLimit. 100, thông báo WhenChangesStop. thật }); . chọn nhiều ('bật'); . đa lựa chọn ('vô hiệu hóa'); . has('enable')) { var enable = allBindings. get('kích hoạt'); . isObservable(enable)) { ko. tính toán ({ đọc. function () { setEnabled(enable()); . thành phần }). gia hạn ({ rateLimit. 100, thông báo WhenChangesStop. thật }); . has('disable')) { var disable = allBindings. get('vô hiệu hoá'); . isObservable(vô hiệu hóa)) { ko. tính toán ({ đọc. hàm () { setEnabled (. vô hiệu hóa()); . thành phần }). gia hạn ({ rateLimit. 100, thông báo WhenChangesStop. thật }); . vô hiệu hóa); . đồ dùng. domNodeDisposal. addDisposeCallback(phần tử, hàm() { $element. chọn nhiều ('hủy'); . function(element, valueAccessor, allBindings, viewModel, bindingContext) { var $element = $(element); . toJS(valueAccessor()); . nhiều lựa chọn ('setOptions', cấu hình); . multiselect('xây dựng lại'); . chiều dài; . * * @param {jQuery} select * @param {Object} options * @returns {Multiselect} */ function Multiselect(select, options) { cái này. $chọn = $(chọn); . tùy chọn = cái này. hợp nhất($). mở rộng ({}, tùy chọn, điều này. $chọn. dữ liệu())); . $chọn. attr("data-placeholder")) { cái này. tùy chọn. nonSelectedText = cái này. $chọn. dữ liệu ("giữ chỗ"); . // Chúng ta phải sao chép để tạo một tham chiếu mới. cái này. originalOptions = cái này. $chọn. bản sao () [0]. tùy chọn; . truy vấn = ''; . searchTimeout = null; . lastToggledInput = null; . tùy chọn. nhiều = cái này. $chọn. attr('multiple') === "multiple"; . tùy chọn. trênThay đổi = $. proxy (cái này. tùy chọn. onChange, cái này); . tùy chọn. onSelectAll = $. proxy (cái này. tùy chọn. onSelectAll, cái này); . tùy chọn. onDeselectAll = $. proxy (cái này. tùy chọn. onDeselectAll, cái này); . tùy chọn. onDropdownShow = $. proxy (cái này. tùy chọn. onDropdownShow, cái này); . tùy chọn. onDropdownHide = $. proxy (cái này. tùy chọn. onDropdownHide, cái này); . tùy chọn. onDropdownShown = $. proxy (cái này. tùy chọn. onDropdownShown, cái này); . tùy chọn. onDropdownHidden = $. proxy (cái này. tùy chọn. onDropdownHidden, cái này); . tùy chọn. onInitialized = $. proxy (cái này. tùy chọn. onInitialized, cái này); . tùy chọn. onFiltering = $. proxy (cái này. tùy chọn. onFiltering, cái này); . cái này. buildContainer(); . buildButton(); . buildDropdown(); . buildSelectAll(); . buildDropdownOptions(); . buildFilter(); . cập nhậtButtonText(); . updateSelectAll(true); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . tùy chọn. wasDisabled = cái này. $chọn. prop ('bị vô hiệu hóa'); . tùy chọn. disableIfEmpty && $('option', this. $chọn). chiều dài <= 0) { cái này. vô hiệu hóa(); . $chọn. quấn (''). sau đây. $container); . tùy chọn. onInitialized (cái này. $chọn, cái này. $container); . nguyên mẫu = { mặc định. { /** * Chức năng văn bản mặc định sẽ in 'Không được chọn' trong trường hợp không có tùy chọn * nào được chọn hoặc danh sách các tùy chọn đã chọn có độ dài * gồm 3 tùy chọn đã chọn. * * @param {jQuery} tùy chọn * @param {jQuery} chọn * @returns {String} */ buttonText. chức năng (tùy chọn, chọn) { if (điều này. văn bản bị vô hiệu hóa. chiều dài > 0 && (chọn. chống đỡ ('đã tắt'). (tùy chọn. chiều dài == 0 && cái này. disableIfEmpty))) { trả lại cái này. văn bản bị vô hiệu hóa; . chiều dài === 0) { trả lại cái này. văn bản không được chọn; . tất cả SelectedText && tùy chọn. chiều dài === $('option', $(select)). độ dài && $('tùy chọn', $(chọn)). chiều dài. == 1 && cái này. nhiều) { if (cái này. selectAllNumber) { trả lại cái này. allSelectedText + ' (' + tùy chọn. chiều dài + ')'; . allSelectedText; . chiều dài > cái này. numberDisplayed) { tùy chọn trả lại. độ dài + ' ' + cái này. nSelectedText; . dấu phân cáchVăn bản; . each(function() { var label = ($(this). attr('nhãn'). == không xác định)? . attr('nhãn'). $(cái này). chữ(); . chất nền(0, đã chọn. chiều dài - cái này. dấu phân cáchVăn bản. chiều dài); . * * @param {jQuery} tùy chọn * @param {jQuery} select * @returns {@exp;selected@call;substr} */ buttonTitle. chức năng (tùy chọn, chọn) { if (tùy chọn. chiều dài === 0) { trả lại cái này. văn bản không được chọn; . dấu phân cáchVăn bản; . mỗi (hàm () { var nhãn = ($(cái này). attr('nhãn'). == không xác định)? . attr('nhãn'). $(cái này). chữ(); . chất nền(0, đã chọn. chiều dài - cái này. dấu phân cáchVăn bản. chiều dài); . hàm (tùy chọn) { trả về sai; . * * @param phần tử {jQuery} * @returns {String} */ optionLabel. hàm (phần tử){ trả về $ (phần tử). attr('nhãn'). $(phần tử). chữ(); . * * @param phần tử {jQuery} * @returns {String} */ optionClass. hàm (phần tử) { return $ (phần tử). attr('lớp'). ''; . * * Không được kích hoạt khi chọn/bỏ chọn các tùy chọn theo cách thủ công. * * @param {jQuery} tùy chọn * @param {Boolean} đã chọn */ onChange. chức năng (tùy chọn, đã chọn) { }, /** * Được kích hoạt khi danh sách thả xuống được hiển thị. * * @param {jQuery} sự kiện */ onDropdownShow. function(event) { }, /** * Được kích hoạt khi danh sách thả xuống bị ẩn. * * @param {jQuery} sự kiện */ onDropdownHide. function(event) { }, /** * Được kích hoạt sau khi danh sách thả xuống được hiển thị. * * @param {jQuery} sự kiện */ onDropdownShown. function(event) { }, /** * Được kích hoạt sau khi danh sách thả xuống bị ẩn. * * @param {jQuery} sự kiện */ onDropdownHidden. chức năng (sự kiện) { }, /** * Được kích hoạt khi chọn tất cả. */ onSelectAll. function() { }, /** * Được kích hoạt khi bỏ chọn tất cả. */ onDeselectAll. function() { }, /** * Kích hoạt sau khi khởi tạo. * * @param {jQuery} $select * @param {jQuery} $container */ onInitialized. function($select, $container) { }, /** * Được kích hoạt khi lọc. * * @param {jQuery} $filter */ onFiltering. hàm($filter) { }, enableHTML. sai, lớp nút. 'btn btn-default', lớp kế thừa. sai, chiều rộng nút. 'tự động', nútContainer. '').after(this.$container); this.options.onInitialized(this.$select, this.$container); } Multiselect.prototype = { defaults: { /** * Default text function will either print 'None selected' in case no * option is selected or a list of the selected options up to a length * of 3 selected options. * * @param {jQuery} options * @param {jQuery} select * @returns {String} */ buttonText: function(options, select) { if (this.disabledText.length > 0 && (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty))) { return this.disabledText; } else if (options.length === 0) { return this.nonSelectedText; } else if (this.allSelectedText && options.length === $('option', $(select)).length && $('option', $(select)).length !== 1 && this.multiple) { if (this.selectAllNumber) { return this.allSelectedText + ' (' + options.length + ')'; } else { return this.allSelectedText; } } else if (options.length > this.numberDisplayed) { return options.length + ' ' + this.nSelectedText; } else { var selected = ''; var delimiter = this.delimiterText; options.each(function() { var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text(); selected += label + delimiter; }); return selected.substr(0, selected.length - this.delimiterText.length); } }, /** * Updates the title of the button similar to the buttonText function. * * @param {jQuery} options * @param {jQuery} select * @returns {@exp;selected@call;substr} */ buttonTitle: function(options, select) { if (options.length === 0) { return this.nonSelectedText; } else { var selected = ''; var delimiter = this.delimiterText; options.each(function () { var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text(); selected += label + delimiter; }); return selected.substr(0, selected.length - this.delimiterText.length); } }, checkboxName: function(option) { return false; // no checkbox name }, /** * Create a label. * * @param {jQuery} element * @returns {String} */ optionLabel: function(element){ return $(element).attr('label') || $(element).text(); }, /** * Create a class. * * @param {jQuery} element * @returns {String} */ optionClass: function(element) { return $(element).attr('class') || ''; }, /** * Triggered on change of the multiselect. * * Not triggered when selecting/deselecting options manually. * * @param {jQuery} option * @param {Boolean} checked */ onChange : function(option, checked) { }, /** * Triggered when the dropdown is shown. * * @param {jQuery} event */ onDropdownShow: function(event) { }, /** * Triggered when the dropdown is hidden. * * @param {jQuery} event */ onDropdownHide: function(event) { }, /** * Triggered after the dropdown is shown. * * @param {jQuery} event */ onDropdownShown: function(event) { }, /** * Triggered after the dropdown is hidden. * * @param {jQuery} event */ onDropdownHidden: function(event) { }, /** * Triggered on select all. */ onSelectAll: function() { }, /** * Triggered on deselect all. */ onDeselectAll: function() { }, /** * Triggered after initializing. * * @param {jQuery} $select * @param {jQuery} $container */ onInitialized: function($select, $container) { }, /** * Triggered on filtering. * * @param {jQuery} $filter */ onFiltering: function($filter) { }, enableHTML: false, buttonClass: 'btn btn-default', inheritClass: false, buttonWidth: 'auto', buttonContainer: '

', dropRight. sai, dropUp. sai, lớp đã chọn. 'đang hoạt động', // Chiều cao tối đa của dropdown menu. // Nếu vượt quá chiều cao tối đa, thanh cuộn sẽ được hiển thị. chiều cao tối đa. sai, bao gồmSelectAllOption. sai, bao gồmSelectAllIfMoreThan. 0, chọnTất cả văn bản. 'Chọn tất cả', chọnAllValue. 'multiselect-all', selectAllName. sai, chọnTất cảSố. đúng, chọnAllJustVisible. đúng, kích hoạt Lọc. sai, enableCaseInsensitiveFiltering. sai, enableFullValueFiltering. sai, enableClickableOptGroups. sai, enableCollapsibleOptGroups. sai, bộ lọcPlaceholder. 'Tìm kiếm', // các tùy chọn có thể. 'văn bản', 'giá trị', 'cả hai' bộ lọcHành vi. 'văn bản', bao gồmFilterClearBtn. đúng, ngăn chặnInputChangeEvent. sai, văn bản không được chọn. 'Không được chọn', nSelectedText. 'đã chọn', tất cả văn bản được chọn. 'Tất cả đã chọn', sốHiển thị. 3, tắt IfEmpty. sai, bị vô hiệu hóa. '', dấu phân cáchVăn bản. ', ', mẫu. { cái nút. '', u. '', lọc. '

', filterClearBtn. ' ', li. '

', dải phân cách. '', liGroup. '

' } }, người xây dựng. Multiselect, /** * Xây dựng vùng chứa multiselect. */ buildContainer. hàm () { cái này. $container = $(cái này. tùy chọn. nútContainer); . $container. bật ('hiển thị. bs. thả xuống', cái này. tùy chọn. onDropdownShow); . $container. bật ('ẩn. bs. thả xuống', cái này. tùy chọn. onDropdownHide); . $container. bật ('hiển thị. bs. thả xuống', cái này. tùy chọn. onDropdownShown); . $container. bật ('ẩn. bs. thả xuống', cái này. tùy chọn. onDropdownHidden); . */ nút xây dựng. hàm () { cái này. nút $ = $(cái này. tùy chọn. mẫu. cái nút). addClass(cái này. tùy chọn. nútClass); . $chọn. attr('class') && cái này. tùy chọn. inheritClass) { cái này. nút $. addClass(cái này. $chọn. attr('lớp')); . nếu (cái này. $chọn. prop('disabled')) { cái này. vô hiệu hóa(); . cho phép(); . nếu (cái này. tùy chọn. nútChiều rộng && cái này. tùy chọn. nútChiều rộng. == 'tự động') { cái này. nút $. css({ 'chiều rộng'. '100%', //cái này. tùy chọn. buttonWidth, 'tràn'. 'ẩn', 'tràn văn bản'. 'dấu chấm lửng' }); . $container. css({ 'chiều rộng'. cái này. tùy chọn. buttonWidth }); . var tabindex = cái này. $chọn. attr('tabindex'); . nút $. attr('tabindex', tabindex); . $container. chuẩn bị trước (cái này. nút $); . */ buildDropdown. function() { // Xây dựng. cái này. $ul = $(cái này. tùy chọn. mẫu. u); . tùy chọn. dropRight) { cái này. $ul. addClass('pull-right'); . nếu (cái này. tùy chọn. maxHeight) { // CẦN LÀM. Thêm một lớp cho tùy chọn này để di chuyển các khai báo css. cái này. $ul. css({ 'chiều cao tối đa'. cái này. tùy chọn. maxHeight + 'px', 'tràn-y'. 'tự động', 'tràn-x'. 'ẩn giấu' }); . tùy chọn. dropUp) { var height = Math. tối thiểu (cái này. tùy chọn. maxHeight, $('option[data-role. = "dấu phân cách"]', cái này. $chọn). độ dài*26 + $('option[data-role="divider"]', cái này. $chọn). chiều dài*19 + (cái này. tùy chọn. bao gồmSelectAllOption? . 0) + (cái này. tùy chọn. kích hoạt lọc. cái này. tùy chọn. enableCaseInsensitiveFiltering? . 0)); . $ul. css({ 'chiều cao tối đa'. chiều cao + 'px', 'tràn-y'. 'tự động', 'tràn-x'. 'ẩn', 'lề trên'. "-" + moveCalc + 'px' }); . $container. nối thêm (cái này. $ul); . * * Sử dụng createDivider và createOptionValue để tạo các tùy chọn cần thiết. */ buildDropdownOptions. hàm () { cái này. $chọn. bọn trẻ(). mỗi ($. proxy(function(index, element) { var $element = $(element); // Hỗ trợ đồng thời nhóm chọn và tùy chọn không có nhóm. thẻ var = $element. chống đỡ ('tên thẻ'). toLowerCase(); . prop('giá trị') === cái này. tùy chọn. selectAllValue) { trả lại; . tạo Optgroup(phần tử); . dữ liệu ('vai trò') === 'bộ chia') { cái này. createDivider(); . createOptionValue(phần tử); . }, cái này)); . $('li. không phải(. đầu vào nhiều nhóm)', điều này. $ul). bật ('thay đổi', $. proxy(chức năng(sự kiện) { var $target = $(sự kiện. Mục tiêu); . prop('đã chọn'). sai; . val() === cái này. tùy chọn. chọn Tất cả Giá trị; . nếu (cái này. tùy chọn. đã chọnClass) { if (đã chọn) { $ target. gần nhất ('li'). addClass(cái này. tùy chọn. đã chọnClass); . gần nhất ('li'). removeClass(cái này. tùy chọn. đã chọnClass); . giá trị var = $mục tiêu. giá trị(); . getOptionByValue(giá trị); . $chọn). not($option); . $container). không($mục tiêu); . chọnTất cả (cái này. tùy chọn. selectAllJustVisible, true); . bỏ chọn Tất cả (cái này. tùy chọn. selectAllJustVisible, true); . prop('được chọn', true); . tùy chọn. nhiều) { // Chỉ cần chọn tùy chọn bổ sung. tùy chọn $. prop('được chọn', true); . nếu (cái này. tùy chọn. đã chọnClass) { $($checkboxesNotThis). gần nhất ('li'). removeClass(cái này. tùy chọn. đã chọnClass); . prop('đã chọn', sai); . prop('được chọn', sai); . cái này. nút $. nhấp chuột(); . tùy chọn. đã chọnClass === "đang hoạt động") { $optionsNotThis. gần nhất ("a"). css("phác thảo", ""); . tùy chọn $. prop('được chọn', sai); . #575 cái này. tùy chọn. onChange($option, đã chọn); . cái này. cập nhậtSelectAll(); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . $chọn. biến đổi(); . cập nhậtButtonText(); . tùy chọn. ngăn chặnInputChangeEvent) { trả về sai; . $ul). on('mousedown', function(e) { if (e. shiftKey) { // Ngăn chọn văn bản bằng Shift+click return false; . $ul). on('touchstart click', $. proxy(chức năng(sự kiện) { sự kiện. stopPropagation(); . Mục tiêu); . shiftKey && cái này. tùy chọn. nhiều) { if ($ target. is("label")){ // Xử lý lựa chọn hộp kiểm theo cách thủ công (xem https. //github. sự kiện com/davidstutz/bootstrap-multiselect/issues/431). ngăn chặn Mặc định(); . tìm ("đầu vào"); . prop("đã chọn",. mục tiêu $. prop("đã chọn")); . prop('đã chọn'). sai; . lastToggledInput. == null && cái này. lastToggledInput. == $ target) { // Đảm bảo rằng chúng ta thực sự có một phạm vi var from = $ target. gần nhất ("li"). mục lục(); . lastToggledInput. gần nhất ("li"). mục lục(); . $ul. tìm ("li"). lát (từ, đến). tìm ("đầu vào"); . prop('đã chọn', đã chọn); . tùy chọn. đã chọnClass) { phạm vi. gần nhất ('li'). toggleClass(cái này. tùy chọn. đã chọnClass, đã chọn); . chiều dài; . getOptionByValue($checkbox). val()); . prop('đã chọn', đã chọn); . kích hoạt ("thay đổi"); . là ("đầu vào") &&. mục tiêu $. gần nhất ("li"). Là(". multiselect-item")){ cái này. lastToggledInput = $ target; . mơ hồ(); . cái này. $container. tắt ('phím xuống. nhiều lựa chọn'). bật ('phím xuống. nhiều lựa chọn', $. proxy(chức năng(sự kiện) { if ($('input[type="text"]', cái này. $container). Là('. tiêu điểm')) { quay lại; . mã khóa === 9 && cái này. $container. hasClass('open')) { cái này. nút $. nhấp chuột(); . $container). tìm ("li. không phải(. dải phân cách). không phải(. vô hiệu hóa) a"). lọc(". hiển thị"); nếu (. $items. chiều dài) { trở lại; . chỉ mục($items. lọc('. tiêu điểm')); . nếu (sự kiện. keyCode === 38 && index > 0) { index--; . khác nếu (sự kiện. mã khóa === 40 && chỉ mục < $items. chiều dài - 1) { chỉ số ++; . ~chỉ số) { chỉ số = 0; . eq(chỉ mục); . tiêu điểm(); . mã khóa === 32. Sự kiện. keyCode === 13) { var $checkbox = $current. tìm ('đầu vào'); . prop("đã chọn",. hộp kiểm $. prop("đã chọn")); . biến đổi(); . stopPropagation(); . ngăn chặn Mặc định(); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { $("li. đầu vào nhóm nhiều lựa chọn", cái này. $ul). bật ("thay đổi", $. proxy(chức năng(sự kiện) { sự kiện. stopPropagation(); . Mục tiêu); . prop('đã chọn'). sai; . Mục tiêu). gần nhất('li'); . nextUntil("li. nhóm nhiều lựa chọn"). không phải('. multiselect-filter-hidden'). không phải('. Vô hiệu hóa'); . tìm ("đầu vào"); . tùy chọn. đã chọnClass) { if (đã chọn) { $li. addClass(cái này. tùy chọn. đã chọnClass); . removeClass(cái này. tùy chọn. đã chọnClass); . mỗi ($đầu vào, $. proxy (chức năng (chỉ mục, đầu vào) { giá trị var = $ (đầu vào). giá trị(); . getOptionByValue(giá trị); . prop('đã chọn', true); . gần nhất ('li'). addClass(cái này. tùy chọn. đã chọnClass); . prop('được chọn', true); . prop('đã chọn', sai); . gần nhất ('li'). removeClass(cái này. tùy chọn. đã chọnClass); . prop('được chọn', sai); . đẩy (cái này. getOptionByValue(giá trị)); . cái này. tùy chọn. onChange($options, đã chọn); . cập nhậtButtonText(); . cập nhậtSelectAll(); . tùy chọn. enableCollapsibleOptGroups && cái này. tùy chọn. nhiều) { $("li. nhóm nhiều lựa chọn. caret-container", cái này. $ul). bật ("nhấp chuột", $. proxy(chức năng(sự kiện) { var $li = $(sự kiện. Mục tiêu). gần nhất('li'); . nextUntil("li. nhóm nhiều lựa chọn"). không phải('. multiselect-filter-hidden'); . mỗi (chức năng () { có thể nhìn thấy = có thể nhìn thấy && $ (cái này). Là('. dễ thấy'); . ẩn giấu(). addClass('multiselect-collapse-hidden'); . trình diễn(). removeClass('multiselect-collapse-hidden'); . chọn nhiều tất cả", cái này. $ul). css('nền', '#f3f3f3'). css('đường viền dưới', '1px rắn #eaeaea'); . chọn nhiều tất cả > a > nhãn. hộp kiểm", cái này. $ul). css('phần đệm', '3px 20px 3px 35px'); . multiselect-group > a > input", cái này. $ul). css('lề', '4px 0px 5px -20px'); . * * Phần tử @param {jQuery} */ createOptionValue. hàm (phần tử) { var $ phần tử = $ (phần tử); . Là('. đã chọn')) { $element. prop('được chọn', true); . nhãn var = cái này. tùy chọn. tùy chọnLabel(phần tử); . tùy chọn. tùy chọnClass(phần tử); . giá trị(); . tùy chọn. nhiều ? . "Đài"; . tùy chọn. mẫu. li); . addClass(inputType); . addClass(lớp); . tùy chọn. enableHTML) { $label. html(" " + nhãn); . văn bản (" " + nhãn); . attr('kiểu', kiểu đầu vào); . tùy chọn. hộp kiểmName($element); . attr('tên', tên); . trả trước ($ hộp kiểm); . chỗ dựa ('được chọn'). sai; . giá trị (giá trị); . tùy chọn. selectAllValue) { $li. addClass("multiselect-item multiselect-all"); . cha mẹ(). cha mẹ(). addClass('multiselect-all'); . attr('tiêu đề', $element. attr('tiêu đề')); . $ul. chắp thêm($li); . Là('. bị vô hiệu hóa')) { hộp kiểm $. attr('bị vô hiệu hóa', 'bị vô hiệu hóa'). prop ('đã tắt', đúng). gần nhất ('a'). attr("tabindex", "-1"). gần nhất ('li'). addClass('đã tắt'); . prop('đã chọn', đã chọn); . tùy chọn. đã chọnClass) { hộp kiểm $. gần nhất ('li'). addClass(cái này. tùy chọn. đã chọnClass); . * * @param {jQuery} phần tử */ createDivider. hàm (phần tử) { var $divider = $(this. tùy chọn. mẫu. bộ chia); . $ul. nối thêm ($ chia); . * * @param {jQuery} nhóm */ createOptgroup. chức năng (nhóm) { var nhãn = $ (nhóm). attr("nhãn"); . attr("giá trị");

'); . tùy chọn. tùy chọnClass(nhóm); . addClass(lớp); . tùy chọn. enableHTML) { $('nhãn b', $li). html(" " + nhãn); . văn bản (" " + nhãn); . tùy chọn. enableCollapsibleOptGroups && cái này. tùy chọn. nhiều) { $('a', $li). chắp thêm(' '); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { $('a label', $li). trả trước (''); . Là('. bị vô hiệu hóa')) { $li. addClass('đã tắt'); . $ul. chắp thêm($li); . mỗi ($. proxy(function($, nhóm) { cái này. createOptionValue(nhóm); . * * Kiểm tra xem một lựa chọn tất cả đã được tạo chưa. */ buildSelectAll. function() { if (typeof this. tùy chọn. selectAllValue === 'số') { cái này. tùy chọn. selectAllValue = cái này. tùy chọn. selectAllValue. toString(); . hasSelectAll(); . đãHasSelectAll && cái này. tùy chọn. bao gồmSelectAllOption && cái này. tùy chọn. nhiều && $('option', cái này. $chọn). chiều dài > cái này. tùy chọn. bao gồmSelectAllIfMoreThan) { // Kiểm tra xem có thêm dấu phân cách sau khi chọn tất cả không. nếu (cái này. tùy chọn. bao gồmSelectAllDivider) { cái này. $ul. trả trước ($(cái này. tùy chọn. mẫu. bộ chia)); . tùy chọn. mẫu. li); . addClass("hộp kiểm"); . tùy chọn. enableHTML) { $('nhãn', $li). html(" " + này. tùy chọn. selectAllText); . văn bản (" " + này. tùy chọn. selectAllText); . tùy chọn. selectAllName) { $('nhãn', $li). trả trước (''); . trả trước (''); . giá trị (cái này. tùy chọn. selectAllValue); . addClass("multiselect-item multiselect-all"); . cha mẹ(). cha mẹ(). addClass('multiselect-all'); . $ul. trả trước($li); . prop('đã chọn', sai); . */ buildFilter. function() { // Xây dựng bộ lọc nếu lọc HOẶC lọc không phân biệt chữ hoa chữ thường được bật và số lượng tùy chọn vượt quá (hoặc bằng) enableFilterLength. nếu (cái này. tùy chọn. kích hoạt lọc. cái này. tùy chọn. enableCaseInsensitiveFiltering) { var enableFilterLength = Math. tối đa (cái này. tùy chọn. enableFiltering, cái này. tùy chọn. enableCaseInsensitiveFiltering); . $chọn. tìm ('tùy chọn'). chiều dài >= enableFilterLength) { cái này. $filter = $(cái này. tùy chọn. mẫu. lọc); . bộ lọc $). attr('giữ chỗ', cái này. tùy chọn. filterPlaceholder); . tùy chọn. bao gồmFilterClearBtn) { var clearBtn = $(this. tùy chọn. mẫu. bộ lọcClearBtn); . bật ('nhấp chuột', $. proxy(function(event){ clearTimeout(this. searchTimeout); . bộ lọc $. tìm thấy('. tìm kiếm nhiều lựa chọn'). giá trị (''); . $ul). trình diễn(). removeClass('multiselect-filter-hidden'); . cập nhậtSelectAll(); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . bộ lọc $. tìm thấy('. nhóm đầu vào'). nối thêm (ClearBtn); . $ul. chuẩn bị trước (cái này. bộ lọc $); . bộ lọc $. giá trị (cái này. truy vấn). bật ('nhấp chuột', chức năng (sự kiện) { sự kiện. stopPropagation(); . on('nhập phím xuống', $. proxy(function(event) { // Hủy nhập hành vi mặc định của khóa if (event. mà === 13) { sự kiện. ngăn chặn Mặc định(); . ClearTimeout (cái này. searchTimeout); . searchTimeout = cái này. asyncFunction($. proxy(function() { if (cái này. truy vấn. == sự kiện. Mục tiêu. giá trị) { cái này. truy vấn = sự kiện. Mục tiêu. giá trị; . mỗi ($('li', cái này. $ul), $. proxy(function(index, element) { var value = $('input', element). chiều dài > 0? . giá trị(). ""; . chữ(); . tùy chọn. filterBehavior === 'text')) { filterCandidate = text; . tùy chọn. filterBehavior === 'value')) { filterCandidate = value; . tùy chọn. filterBehavior === 'cả hai') { filterCandidate = text + '\n' + value; . == cái này. tùy chọn. selectAllValue && text) { // Theo mặc định, giả sử phần tử đó không // thú vị cho tìm kiếm này. var showElement = false; . tùy chọn. enableCaseInsensitiveFiltering) { filterCandidate = filterCandidate. toLowerCase(); . truy vấn = cái này. truy vấn. toLowerCase(); . tùy chọn. enableFullValueFiltering && cái này. tùy chọn. bộ lọcHành vi. == 'cả hai') { var valueToMatch = filterCandidate. cắt (). chuỗi con (0, cái này. truy vấn. chiều dài); . truy vấn. indexOf(valueToMatch) > -1) { showElement = true; . indexOf(cái này. truy vấn) > -1) { showElement = true; . $(phần tử). chuyển đổi (showElement). toggleClass('multiselect-filter-hidden',. showElement); . nếu ($(phần tử). hasClass('multiselect-group')) { // Ghi nhớ trạng thái nhóm. nhóm hiện tại = phần tử; . nếu (showElement) { $(currentGroup). trình diễn(). removeClass('multiselect-filter-hidden'); . nếu (. showElement && currentGroupVisible) { $(element). trình diễn(). removeClass('multiselect-filter-hidden'); . cập nhậtSelectAll(); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . tùy chọn. onFiltering(sự kiện. Mục tiêu); . */ hủy hoại. hàm () { cái này. $container. gỡ bỏ(); . $chọn. trình diễn(); . $chọn. prop ('đã tắt', cái này. tùy chọn. wasDisabled); . $chọn. dữ liệu ('nhiều lựa chọn', null); . */ Làm tươi. hàm () { đầu vào var = $. map($('li đầu vào', cái này. $ul), $); . $chọn). mỗi ($. proxy(hàm (chỉ mục, phần tử) { var $elem = $(phần tử); var value = $elem. giá trị(); . chiều dài; . == ($ đầu vào = đầu vào [i]). val()) tiếp tục; . Là('. đã chọn')) { $input. prop('đã chọn', true); . tùy chọn. đã chọnClass) { $input. gần nhất ('li'). addClass(cái này. tùy chọn. đã chọnClass); . prop('đã chọn', sai); . tùy chọn. đã chọnClass) { $input. gần nhất ('li'). removeClass(cái này. tùy chọn. đã chọnClass); . Là(". bị vô hiệu hóa")) { $input. attr('bị vô hiệu hóa', 'bị vô hiệu hóa'). prop ('đã tắt', đúng). gần nhất ('li'). addClass('đã tắt'); . prop ('bị vô hiệu hóa', sai). gần nhất ('li'). removeClass('đã tắt'); . cập nhậtButtonText(); . cập nhậtSelectAll(); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . * * Nếu triggerOnChange được đặt thành true, thì sự kiện thay đổi được kích hoạt nếu * và chỉ khi một giá trị được chuyển. * * @param {Array} selectValues ​​* @param {Boolean} triggerOnChange */ select. function(selectValues, triggerOnChange) { if(. $. isArray(selectValues)) { selectValues ​​= [selectValues]; . chiều dài; . giá trị === không xác định) { tiếp tục; . getOptionByValue(giá trị); . getInputByValue(giá trị); . hộp kiểm $ === không xác định) { tiếp tục; . cái này. tùy chọn. nhiều) { cái này. bỏ chọn Tất cả (sai); . tùy chọn. đã chọnClass) { hộp kiểm $. gần nhất ('li'). addClass(cái này. tùy chọn. đã chọnClass); . prop('đã chọn', true); . prop('được chọn', true); . tùy chọn. onChange($option, true); . cập nhậtButtonText(); . cập nhậtSelectAll(); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . */ ClearSelection. hàm () { cái này. bỏ chọn Tất cả (sai); . cập nhậtButtonText(); . cập nhậtSelectAll(); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . * * Nếu triggerOnChange được đặt thành true, thì sự kiện thay đổi được kích hoạt, nếu * và chỉ khi một giá trị được chuyển. * * @param {Array} bỏ chọn Giá trị * @param {Boolean} triggerOnChange */ bỏ chọn. function(deselectValues, triggerOnChange) { if(. $. isArray(deselectValues)) { deselectValues ​​= [deselectValues]; . chiều dài; . giá trị === không xác định) { tiếp tục; . getOptionByValue(giá trị); . getInputByValue(giá trị); . hộp kiểm $ === không xác định) { tiếp tục; . tùy chọn. đã chọnClass) { hộp kiểm $. gần nhất ('li'). removeClass(cái này. tùy chọn. đã chọnClass); . prop('đã chọn', sai); . prop('được chọn', sai); . tùy chọn. onChange($option, false); . cập nhậtButtonText(); . cập nhậtSelectAll(); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhật Nhóm chọn (); . * * Nếu justVisible là đúng hoặc không được chỉ định, thì chỉ các tùy chọn hiển thị được chọn. * * @param {Boolean} justVisible * @param {Boolean} triggerOnSelectAll */ selectAll. chức năng (justVisible, triggerOnSelectAll) { var justVisible = typeof justVisible === 'không xác định'? . chỉ có thể nhìn thấy; . không phải(. dải phân cách). không phải(. Vô hiệu hóa). không phải(. multiselect-group)", cái này. $ul); . không phải(. dải phân cách). không phải(. Vô hiệu hóa). không phải(. nhóm nhiều lựa chọn). không phải(. nhiều lựa chọn-bộ lọc-ẩn). không phải(. multiselect-collapisble-hidden)", cái này. $ul). lọc('. dễ thấy'); . đã bật' , có thể nhìn thấyLis). prop('đã chọn', true); . addClass(cái này. tùy chọn. đã chọnClass); . đã bật' , có thể nhìn thấyLis). mỗi ($. proxy (hàm (chỉ mục, phần tử) { giá trị var = $ (phần tử). giá trị(); . getOptionByValue(giá trị); . prop('được chọn', true); . đã bật' , allLis). prop('đã chọn', true); . addClass(cái này. tùy chọn. đã chọnClass); . đã bật' , allLis). mỗi ($. proxy (hàm (chỉ mục, phần tử) { giá trị var = $ (phần tử). giá trị(); . getOptionByValue(giá trị); . prop('được chọn', true); . tùy chọn. selectAllValue + '"]', cái này. $ul). prop('đã chọn', true); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . tùy chọn. onSelectAll(); . * * Nếu justVisible là đúng hoặc không được chỉ định, thì chỉ các tùy chọn hiển thị mới được bỏ chọn. * * @param {Boolean} justVisible */ bỏ chọn Tất cả. chức năng (justVisible, triggerOnDeselectAll) { var justVisible = typeof justVisible === 'không xác định'? . chỉ có thể nhìn thấy; . không phải(. dải phân cách). không phải(. Vô hiệu hóa). không phải(. multiselect-group)", cái này. $ul); . không phải(. dải phân cách). không phải(. Vô hiệu hóa). không phải(. nhóm nhiều lựa chọn). không phải(. nhiều lựa chọn-bộ lọc-ẩn). không phải(. multiselect-collapisble-hidden)", cái này. $ul). lọc('. dễ thấy'); . đã bật' , có thể nhìn thấyLis). prop('đã chọn', sai); . removeClass(cái này. tùy chọn. đã chọnClass); . đã bật' , có thể nhìn thấyLis). mỗi ($. proxy (hàm (chỉ mục, phần tử) { giá trị var = $ (phần tử). giá trị(); . getOptionByValue(giá trị); . prop('được chọn', sai); . đã bật' , allLis). prop('đã chọn', sai); . removeClass(cái này. tùy chọn. đã chọnClass); . đã bật' , allLis). mỗi ($. proxy (hàm (chỉ mục, phần tử) { giá trị var = $ (phần tử). giá trị(); . getOptionByValue(giá trị); . prop('được chọn', sai); . tùy chọn. selectAllValue + '"]', cái này. $ul). prop('đã chọn', sai); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . tùy chọn. onDeselectAll(); . * * Xây dựng lại danh sách thả xuống, bộ lọc và tùy chọn chọn tất cả. */ xây dựng lại. hàm () { cái này. $ul. html(''); . cái này. tùy chọn. nhiều = cái này. $chọn. attr('multiple') === "multiple"; . buildSelectAll(); . buildDropdownOptions(); . buildFilter(); . cập nhậtButtonText(); . updateSelectAll(true); . tùy chọn. enableClickableOptGroups && cái này. tùy chọn. nhiều) { cái này. cập nhậtOptGroups(); . tùy chọn. disableIfEmpty && $('option', this. $chọn). chiều dài

Cách tạo đa

Làm cách nào để chọn nhiều hộp kiểm trong Bootstrap?

Làm cách nào để tạo nhiều lựa chọn thả xuống trong Bootstrap 5?