Thả xuống nhiều lựa chọn bootstrap chọn tất cả theo mặc định

Reac-multiselect-dropdown-bootstrap

một phản ứng. js để dễ dàng tạo danh sách thả xuống cho phép lựa chọn nhiều tùy chọn

ví dụ

Đây là một ví dụ với cài đặt mặc định khi chỉ cung cấp một mảng có các tùy chọn

Cách cài đặt_______0_______

Sau đó, bạn cần nhập nó và đặt ở đâu đó trong ứng dụng của mình. Đây là một ví dụ cho thiết lập mặc định

import React from "react";
import DropdownMultiselect from "react-multiselect-dropdown-bootstrap";

class SomeSection extends React.Component {
  render[] {
    return [
      
    ];
  }
}

export default SectionTwo;

đạo cụ có sẵn

Yêu cầu

  • options - một mảng với các tùy chọn có sẵn
  • name - một chuỗi có tên [giống như đối với đầu vào html thông thường]

Không bắt buộc

  • selected - một mảng với các tùy chọn nên được chọn làm mặc định
  • handleOnChange - chức năng gọi lại để chạy khi các tùy chọn đã chọn sẽ bị thay đổi. Một thông số "đã chọn" có sẵn. Nó chứa một loạt các tùy chọn hiện được chọn. Thí dụ

handleOnChange={[selected] => {
  props.changeMarket[selected];
}}

  • placeholder - giá trị mặc định là "Không có gì được chọn"
  • buttonClass - bạn có thể chỉ định lớp css cho nút. Mặc định là "btn-light"
  • placeholderMultipleChecked - bạn có thể chỉ định một trình giữ chỗ sẽ được sử dụng nếu nhiều tùy chọn được chọn cùng một lúc. Ví dụ. "Nhiều lựa chọn"

Kích thước tập tin. 1. 68 MBLượt xem Tổng cộng. 659942Cập nhật lần cuối. 08/07/2021 01. 35. 00 UTC Ngày Xuất bản. 27/11/2013 12. 52. 39 UTCTrang web chính thức. Tới trang webGiấy phép. MIT

Tải xuống bản trình diễn

Thêm trong danh mục này

Xem các plugin được đề xuất

TOP 100 Plugin jQuery 2022

Chrome, IE8+, FireFox, Opera, Safari#Bootstrap#bootstrap 4#Checkbox#Multiple Select

popupContainer: '

', filter: '
', filterClearBtn: '
', option: '', divider: '
', optionGroup: '', resetButton: '
' } }];

6. chức năng gọi lại

________số 8_______

7. phương pháp API

// destroy the instance
$['#demo'].multiselect['destroy'];

// refresh the checked checkboxes based on the currently selected options
$['#demo'].multiselect['refresh'];

// rebuild the instance
$['#demo'].multiselect['rebuild'];

// select an option
$['#demo'].multiselect['select', value];

// deselect an option
$['#demo'].multiselect['deselect', value];

// select all options
$['#demo'].multiselect['selectAll', justVisible];

// deselect all options
$['#demo'].multiselect['deselectAll', justVisible];

// update the text and title of the button
$['#demo'].multiselect['updateButtonText'];

// update options
$['#demo'].multiselect['setOptions', options];

// enable/disable the multiselect
$['#demo'].multiselect['disable'];
$['#demo'].multiselect['enable'];

/* provide options programmatically
  var data = [
      {label: 'Option 1', title: 'Option 1', value: '1', selected: true},
      {label: 'Option 2', title: 'Option 2', value: '2'},
      {label: 'Option 3', title: 'Option 3', value: '3', selected: true}
  ];
*/
$['#demo'].multiselect['dataprovider', data];

// programmatically provide a new text to display in the button when all options are selected, at runtime
$['#demo'].multiselect['setAllSelectedText', value];

Nhật ký thay đổi

v1. 1. 1 [2021-08-07]

  • Tùy chọn nút đặt lại
  • onSelectAll và onDeselectAll nhận các tùy chọn đã thay đổi làm đối số
  • Hỗ trợ bàn phím cố định
  • Đã sửa lỗi thông số kỹ thuật của Bower và NPM, đặc biệt liên quan đến phiên bản Bootstrap và thông tin meta

v1. 1. 0 [2021-07-30]

  • Thiết kế lại bộ lọc và các mục hoạt động
  • Đã thêm tùy chọn mới "widthSynchronizationMode"
  • Đã thêm tùy chọn mới "buttonTextAlignment"
  • Đã sửa lỗi

2020-12-22

  • Sửa chiều rộng chọn

v1. 0. 0 [2020-11-18]

  • Đã cập nhật cho Bootstrap 4

2020-11-01

  • v0. 9. 16

2018-03-04

  • v0. 9. 15

2018-01-03

  • vá lỗi

2017-12-18

  • vá lỗi

2016-08-18

  • v0. 9. 13

2016-07-30

  • đã sửa. bỏ chọn/chọn không hoạt động với tìm kiếm khi giá trị được nhập vào tìm kiếm

2016-07-29

  • Thêm trình giữ chỗ dữ liệu thu gọn nhiều lựa chọn

23-07-2016

  • Đã sửa các sự cố khác với enableCollapsibleOptGroups

2016-04-23

  • Cho phép tên hộp kiểm khác nhau cho cùng một danh sách thả xuống

21-04-2016

  • đã sửa lỗi chọn tất cả + có thể nhấp + có thể thu gọn

2016-04-20

  • vá lỗi

2016-04-18

  • Một số bản sửa lỗi và nhiều thử nghiệm khác cho các nhóm tùy chọn có thể nhấp và có thể thu gọn

v0. 9. 13 [15-10-2015]

  • vá lỗi

2015-05-27

  • Đã thêm tùy chọn để thu gọn các nhóm [một số loại menu phụ]
  • onChange được kích hoạt riêng cho từng tùy chọn [đã bỏ] được chọn

2015-04-12

  • sửa lỗi

2015-03-18

  • v0. 9. 12

2015-03-01

  • cập nhật

2015-02-17

  • cập nhật

2015-02-14

  • Thêm tùy chọn onSelectAll

2015-02-13

  • Hỗ trợ bộ lọc với các nhóm lựa chọn có thể nhấp

2014-11-02

  • đã khắc phục sự cố

2014-10-13

  • đã khắc phục sự cố

2014-08-08

  • sửa lỗi cho IE 8

2014-08-03

  • Cải thiện hiệu suất bộ lọc
  • Thêm chức năng onDropdownShown gọi lại

2014-07-15

  • Cập nhật

2014-05-24

  • Cập nhật

2014-04-02

  • Đã cập nhật bật, tắt demo

2014-04-01

  • các mẫu có thể được ghi đè bằng các tùy chọn cấu hình

2014-03-31

  • cập nhật

2014-03-13

  • Bootstrap 3. 1. 1 bản cập nhật
  • Đã sửa lỗi

2014-03-12

  • Bootstrap 3. 1. 1 bản cập nhật
  • Đã sửa lỗi

2014-02-07

  • sửa lỗi

2014-01-09

  • Đã sửa lỗi Khi tất cả các tùy chọn bắt đầu là đã chọn = 'đã chọn', hộp kiểm chọn tất cả không được chọn

2013-12-10

  • Đã sửa lỗi khi không có ràng buộc tùy chọn nào được đưa ra

Plugin jQuery tuyệt vời này được phát triển bởi davidstutz. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức

Làm cách nào để sử dụng bootstrap multiselect js?

Cách sử dụng cơ bản. .
Bao gồm thư viện javascript jQuery và khung Bootstrap của Twitter trên trang của bạn. .
Bao gồm plugin multiselect jQuery bootstrap trên trang, sau thư viện jQuery. .
Tạo một danh sách lựa chọn tiêu chuẩn. .
Gọi hàm trên phần tử chọn để khởi tạo plugin

Menu thả xuống đa lựa chọn cơ bản là gì?

HTML MultiSelect Dropdown là một điều khiển hộp văn bản cho phép người dùng nhập hoặc chọn nhiều giá trị từ danh sách các tùy chọn được xác định trước. Nó có một số tính năng vượt trội như liên kết dữ liệu, lọc, nhóm, gắn thẻ với các giá trị tùy chỉnh và chế độ hộp kiểm

Làm cách nào để đặt giá trị đã chọn trong menu thả xuống nhiều lựa chọn bằng jQuery?

Add ` $["#"].refresh[];` – Nouphal.M. Jan 4, 2014 at 4:56..
add $["#"].multiselect["refresh"]; – Dharmang. Jan 4, 2014 at 4:57..
$["#"].multiselect["refresh"]; – Sridhar R. .. .
@Nouphal. m. Nó hiển thị lỗi. .
@ user3085495 lỗi gì?

Làm cách nào để đặt lại danh sách thả xuống hộp kiểm nhiều lựa chọn trong jQuery?

Người dùng có thể chọn các hộp kiểm. Điều này là tốt. Sau khi người dùng kiểm tra các hộp kiểm rồi nhấp vào nút radio đầu tiên , trình đơn thả xuống sẽ biến mất và các giá trị sẽ được đặt lại hay nói cách khác, các hộp kiểm .

Chủ Đề