Ví dụ thả xuống nhiều lựa chọn bootstrap 4

Kịch bản

1

2

3

4

5

6

7

8

9

The section refers the following files:

1

2

3

4

5

6

7

8

9

10

11

12

13

        rel = "stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

        rel = "stylesheet" href="css/bootstrap-multiselect/bootstrap-multiselect.css" loại = "văn bản/css">

Bản trình diễn với các nhóm tùy chọn

Trong bản trình diễn này, các nhóm tùy chọn được sử dụng trong danh sách thả xuống được chọn. Ba nhóm được tạo trong danh sách thả xuống được chọn nơi bạn có thể thấy hộp kiểm trước mỗi tùy chọn. Trong bản trình diễn này, nhóm tùy chọn không thể chọn được. Vì vậy, người dùng phải chọn riêng từng tùy chọn trong các nhóm tùy chọn khác nhau, hãy xem

Kịch bản và đánh dấu

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

Bản demo của nhóm tùy chọn có thể lựa chọn

Bằng cách thêm enableClickableOptGroups là true trong mã jQuery, bạn có thể cho phép người dùng tự chọn nhóm tùy chọn, do đó, tất cả các tùy chọn trong nhóm đó sẽ được chọn chỉ bằng một cú nhấp chuột/lựa chọn bao gồm cả nhóm tùy chọn. có một cái nhìn

Sự khác biệt duy nhất giữa ví dụ này và ví dụ trên là việc sử dụng tùy chọn trong mã jQuery

1

2

3

4

5

6

7

8

9

10

11

12

13

Nếu sử dụng sai, các nhóm tùy chọn sẽ không thể chọn được. Cũng lưu ý, nếu một tùy chọn bị tắt trong nhóm tùy chọn, mã sẽ vẫn hoạt động. Tuy nhiên, tùy chọn bị vô hiệu hóa sẽ không được chọn như trong bản demo bên dưới

Bạn có thể thấy, tùy chọn Python bị tắt trong danh sách thả xuống

Bản trình diễn tạo nhóm tùy chọn có thể thu gọn

Bạn cũng có thể tạo danh sách thả xuống với các nhóm tùy chọn có thể thu gọn bằng cách sử dụng trình cắm Bootstrap nhiều lựa chọn này. Vì vậy, nếu một nhóm được nhấp vào, các tùy chọn của nhóm đó sẽ thu gọn và nếu được nhấp lại, nó sẽ mở rộng

Đối với điều đó, chỉ cần đặt

1

enableCollapsibleOptGroups . đúng

Mã jQuery

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Đặt chiều rộng của ví dụ thả xuống

Bằng cách sử dụng tùy chọn buttonWidth trong mã jQuery, bạn có thể đặt độ rộng của danh sách thả xuống. Xem ví dụ này nơi tôi đặt chiều rộng của menu thả xuống thành 300px

Mã jQuery

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Một bản demo của nhiều lựa chọn thả bên phải

Theo mặc định, các tùy chọn trong danh sách thả xuống nằm bên trái cho dù sử dụng danh sách thả xuống này hay HTML thông thường. Bạn cũng có thể thả nó ngay bằng cách sử dụng dropRight. tùy chọn đúng

Kịch bản

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

Bản trình diễn thả nhiều lựa chọn về phía trên

Tương tự, bạn có thể thả các tùy chọn lên trên thay vì mặc định xuống dưới. Xem bản demo bằng cách nhấp vào hình ảnh hoặc liên kết bên dưới

Kịch bản

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

Bản trình diễn với các tùy chọn lọc

Bạn có thể thêm hộp tìm kiếm để lọc các tùy chọn bên trong danh sách thả xuống nhiều lựa chọn. Đối với điều đó, chỉ cần thêm tùy chọn sau vào mã jQuery

kích hoạt lọc. thật

Tùy chọn này sẽ thêm một hộp văn bản nơi người dùng có thể nhập các chữ cái để lọc ra các tùy chọn. Xem bản trình diễn này

Kịch bản

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

Đánh dấu vẫn giống như trong nhiều ví dụ khác để hiển thị danh sách thả xuống nhiều lựa chọn

Thay đổi văn bản mặc định khi không có tùy chọn nào được chọn

Trong tất cả các ví dụ trên, văn bản được hiển thị nếu không có tùy chọn nào được chọn là. “Không chọn”

Bạn có thể thay đổi văn bản này trong ngữ cảnh menu thả xuống nhiều lựa chọn. Ví dụ: trong các ví dụ của chúng tôi, tôi đang sử dụng phát triển web, ngôn ngữ lập trình và cơ sở dữ liệu để chọn chuyên môn. Tôi sẽ sử dụng công cụ “Chọn chuyên môn. ” nếu không được chọn như sau

Kịch bản

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

Các tùy chọn khác cho danh sách thả xuống nhiều lựa chọn

Plugin có nhiều tùy chọn khác mà bạn có thể khám phá bằng cách truy cập trang demo từ trang web Github. Ví dụ: gọi hàm gọi lại khi danh sách thả xuống được tải, sau khi danh sách thả xuống được hiển thị và gọi hàm gọi lại sau khi danh sách thả xuống được đóng. Bạn có thể thực hiện các hành động khác nhau đối với từng sự kiện khi sử dụng trình cắm này

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

Làm cách nào tôi có thể tạo nhiều danh sách thả xuống trong bootstrap?

Làm cách nào để tạo danh sách thả xuống trong Bootstrap 4?

Bootstrap đa lựa chọn có miễn phí không?