Thêm lớp học vào phần tử select2

Question

Tài liệu là khủng khiếp hoặc tôi đang thiếu điều gì đó. Tôi đang cố gắng thêm một lớp lỗi vào một hộp select2 để xác nhận biểu mẫu. Nó chỉ là một đường viền màu đỏ 1px.

Tôi đã tìm thấy phương pháp containerCssClass trong tài liệu, nhưng tôi không chắc chắn cách áp dụng nó.

Tôi đã thử những điều sau đây không có may mắn:

$("#myBox").select2().containerCssClass('error'); 

Answer 1

jQuery sử dụng đối tượng JSON để khởi tạo, vì vậy tôi đoán này sẽ cũng như: \

$("#myBox").select2({ containerCssClass : "error" }); 

Nếu bạn muốn thêm/xóa lớp học bạn có thể thực hiện việc này sau khi bạn khởi tạo nó

$($("#myBox").select2("container")).addClass("error"); 
$($("#myBox").select2("container")).removeClass("error"); 

Hàm trên sẽ nhận nút DOM của con chính tainer của Select2 ví dụ .: $("#myBox").select2("container")

quan trọng
Bạn sẽ cần phải sử dụng phương pháp container để lấy container vì bạn sẽ không thể chỉnh sửa SELECT trực tiếp nhưng Select2 sẽ tạo ra HTML khác để mô phỏng một SELECT đó là stylable.

Answer 2

Theo số documentation, containerCssClass chỉ là thuộc tính hàm tạo. Điều tốt nhất có lẽ là bạn đang đi để có thể làm là khởi tạo lại nó khi bạn nhận được một lỗi qua:

$("#myBox").select2({ 
    containerCssClass: "error" 
}); 

Lưu ý từ bình luận: Nếu bạn nhận được lỗi chưa gặp: Không Select2/compat/containerCss (...) , bạn cần phải bao gồm phiên bản select2.full.js thay vì cơ bản một

Answer 3

bạn có thể sử dụng dropdownCssClass opiton

$("#myBox").select2({ 
    containerCssClass: "error" 
}); 

Answer 4

cách dễ nhất:

Tạo một lớp cha mẹ như

<div class="select-error"> 
    <select id="select2" name="select2" data-required class="form-control"> 
     <option value="" selected>No selected</option> 
     <option value="1">First</option> 
     <option value="2">Second</option> 
    </select> 
</div> 

khi bạn xác nhận nó với jquery hoặc php chỉ cần thêm phong cách hoặc css để .select-error lớp như

style="border:1px solid red; border-radius: 4px" 

jQuery dụ:

$('[data-required]').each(function() { 
    if (!$(this).val()) { 
    if ($(this).data('select2')) { 
     $('.select-error').css({ 
     'border': '1px solid red', 
     'border-radius': '4px' 
     }); 
    } 
    }); 

Answer 5

Đối với phần tử select2 đã được khởi tạo, tôi đã thử giải pháp @Niels nhưng đã dẫn đến lỗi: Uncaught TypeError: Cannot read property 'apply' of undefined

Went vào nguồn và điều này đã làm việc thay vì:

$($('#myBox').data('select2').$container).addClass('error') 
$($('#myBox').data('select2').$container).removeClass('error') 

Sử dụng Select2 v4.0.3 full

Answer 6

tùy chọn sử dụng theme.

$(".select").select2({ 
     placeholder: "", 
     allowClear: false, 
     theme: "custom-option-select" 
    });