Làm cách nào để sử dụng menu thả xuống select2 trong HTML?

Select2 cung cấp cho bạn hộp chọn có thể tùy chỉnh với hỗ trợ tìm kiếm, gắn thẻ, tập dữ liệu từ xa, cuộn vô hạn và nhiều tùy chọn được sử dụng nhiều khác. Để có tài liệu đầy đủ, vui lòng kiểm tra trang web của plugin

Các tệp CSS và Javascript của Select2 được đóng gói trong các gói plugin toàn cầu và được bao gồm trên toàn cầu trong tất cả các trang

sao chép



  • CSS của Select2 được tùy chỉnh cao trong tệp
    
        
            
            
            
        
        
            
            
            
        
    
    
    0SCSS để sử dụng nó làm thành phần gốc trong hệ thống thiết kế. Mã SCSS được biên dịch thành
    
        
            
            
            
        
        
            
            
            
        
    
    
    1 và được bao gồm trên toàn cầu trong tất cả các trang
  • Javascript của Select2 được khởi tạo toàn cầu với một số cài đặt được xác định trước trong
    
        
            
            
            
        
        
            
            
            
        
    
    
    2và mã khởi tạo được nhóm trong
    
        
            
            
            
        
        
            
            
            
        
    
    
    3và được bao gồm toàn cầu trong tất cả các trang
  • Select2's được khởi tạo toàn cầu thông qua thuộc tính
    
        
            
            
            
        
        
            
            
            
        
    
    
    4HTML như được định nghĩa trong
    
        
            
            
            
        
        
            
            
            
        
    
    
    5và một số tùy chọn có thể được chuyển qua Thuộc tính dữ liệu Select2

Các ví dụ cơ bản về cách sử dụng Select2 với các kiểu nhập mặc định và nền đặc

sao chép


    
    
    



    
    
    



    
    
    

Thêm tùy chọn trống


    
        
        
        
    
    
        
        
        
    

6 để hiển thị trình giữ chỗ khi lựa chọn không được thực hiện

Thêm tùy chọn


    
        
        
        
    
    
        
        
        
    

7 để sửa đầu vào tìm kiếm không thể chỉnh sửa khi Select2 được sử dụng trên Bootstrap Modal với

    
        
        
        
    
    
        
        
        
    

8

Sử dụng thẻ


    
        
        
        
    
    
        
        
        
    

6 để nhóm các tùy chọn đã chọn

sao chép


    
        
        
        
    
    
        
        
        
    

Áp dụng các kích thước đầu vào Bootstrap tiêu chuẩn


    
        
        
        
    
    
        
        
        
    

30 và

    
        
        
        
    
    
        
        
        
    

31

sao chép


    
        
        
        
    
    
        
        
        
    

3

sao chép


    
        
        
        
    
    
        
        
        
    

6

Thêm thuộc tính


    
        
        
        
    
    
        
        
        
    

32 để cho phép xóa các tùy chọn đã chọn

sao chép


    
        
        
        
    
    
        
        
        
    

8

Thêm thuộc tính


    
        
        
        
    
    
        
        
        
    

33 để ẩn đầu vào tìm kiếm trong danh sách thả xuống

sao chép


    
        
        
        
    
    
        
        
        
    

8

sao chép


    
        
        
        
    
    
        
        
        
    

8

Khai báo hộp chọn với thuộc tính ________ 134 để cho phép nhiều lựa chọn với điều khiển thẻ

sao chép


    
    
    



    
    
    



    
    
    

Sử dụng thẻ


    
        
        
        
    
    
        
        
        
    

6 để hiển thị các tùy chọn trong các nhóm cấp đơn

sao chép


    
        
        
        
    
    
        
        
        
    

8

Sử dụng Select2 trong Bootstrap Modal

sao chép


    
    
    



    
    
    



    
    
    

0

Khởi tạo Select2 theo chương trình và thêm thuộc tính


    
        
        
        
    
    
        
        
        
    

38 với đường dẫn đến hình đại diện người dùng để tạo danh sách có chân dung người dùng. Ngoài ra, hãy thêm thuộc tính

    
        
        
        
    
    
        
        
        
    

39 để bao gồm các thành phần nội dung phụ bổ sung

Làm cách nào để sử dụng Select2 trong danh sách thả xuống?

Tải xuống và bao gồm. Tải xuống plugin Select2 từ đây. Bao gồm select2. .
HTML. Create two . .. .
Thử nghiệm. Xem bản trình diễn
Phần kết luận. Truyền giá trị vào val() để đặt tùy chọn đã chọn với jQuery nhưng cũng cần gọi select2()

Select2 trong HTML là gì?

Select2 được thiết kế để trở thành sự thay thế cho hộp . Theo mặc định, nó hỗ trợ tất cả các tùy chọn và thao tác có sẵn trong hộp chọn tiêu chuẩn, nhưng có thêm tính linh hoạt.

Làm cách nào để lấy dữ liệu đã chọn từ Select2?

Các mục đã chọn cũng có thể được truy cập thông qua. bộ chọn jQuery đã chọn. $('#mySelect2'). tìm('. đã chọn');

Tìm kiếm Select2 hoạt động như thế nào?

Khi người dùng lọc kết quả xuống bằng cách nhập cụm từ tìm kiếm vào hộp tìm kiếm, Select2 sẽ sử dụng "trình so khớp" nội bộ để khớp cụm từ tìm kiếm với kết quả . Bạn có thể tùy chỉnh cách Select2 đối sánh cụm từ tìm kiếm bằng cách chỉ định gọi lại cho tùy chọn cấu hình đối sánh.