selected.js :: Có ai có ví dụ làm việc thực tế không?

Question

Có ai đã sử dụng và tùy chỉnh một số mã selected.js cơ bản không?

Tôi đã tải xuống js, css và png, đã sao chép một số mã từ các ví dụ, đã viết ví dụ siêu đơn giản của riêng tôi, nhưng tôi phải thiếu một cái gì đó. Tôi đã xác minh rằng code.jquery.js được bao gồm và được tải, cùng với các selected.css.

Khi tôi cố gắng mang đến ngay cả trường SELECT cực kỳ đơn giản (thả xuống), tôi nhận được một trường rất nhỏ và nhấp vào trường sẽ không làm gì cả. Khi tôi vô hiệu hóa selected.js, tôi chỉ nhận được SELECT với tất cả các tùy chọn được hiển thị.

Đây là cách tôi thêm một đơn giản CHỌN trong jQuery (Tôi phải cư lĩnh vực tự động, mặc dù trong ví dụ này đó là tất cả mã hóa cứng):

$html = '<select name="items" id="items" multiple="multiple" size="1" class="chosenElement">'; 
    $html += '<option value="foo">foo</option>'; 
    $html += '<option value="bar">bar</option>'; 
    $html += '<option value="baz">baz</option>'; 
    $html += '<option value="qux">qux</option>';  
    $html += '</select>'; 

Sau đó, ngay khi tôi hiển thị hộp thoại modal có chứa các tùy chọn, tôi gọi:

$('.modal-body').html($html); 
$('.chosenElement').chosen(); 

Cho đến nay, tôi đã sửa đổi và thử nghiệm tất cả các loại hoán vị, Googled cho các giải pháp hoặc ví dụ, nhưng không có gì có vẻ hiệu quả. Nó có thể là một cái gì đó rất ngớ ngẩn, giống như một dấu chấm phẩy mất tích ở đâu đó, nhưng tôi đã lãng phí quá nhiều thời gian cho việc thực hiện "10 phút" này mà tôi cần phải yêu cầu giúp đỡ.

https://github.com/harvesthq/chosen

Answer 1

bạn phải nhắm vào chọn

$('#items').chosen(); 

jsFiddle

Answer 2

Khi bạn cư lĩnh vực tự động, là JSON kết quả thiết lập trở lại w/"Text" và "giá trị gia tăng" thuộc tính? Nếu không, Chosen sẽ không định dạng kết quả đúng trong danh sách của nó. Trong thực tế, nó sẽ không thêm chúng cả. Tôi đã học được điều này một cách khó khăn bởi vì kết quả của tôi ban đầu đã trở lại với các thuộc tính w/"Name" và "ID" thay thế.

Answer 3

Thử xóa thuộc tính size = "1" khỏi hộp chọn và/hoặc đặt thuộc tính kiểu có chiều rộng lớn hơn. Lựa chọn căn cứ chiều rộng của các yếu tố tạo ra trên chiều rộng của hộp chọn cơ bản vì vậy nếu hộp chọn của bạn là rất nhỏ, lựa chọn lựa chọn sẽ là tốt. Hy vọng rằng sẽ giúp.

Answer 4

quấn mã jQuery bên trong: -

$(document).ready(function(){ 
    $('.chosenElement').chosen(); 
}); 

Answer 5

Ran vào một vấn đề tương tự. Tôi đã không thể tìm ra những gì đã gây ra nó bằng cách trong hoàn cảnh của tôi làm việc này:

$j('select').livequery(
    function(){ 
     $j(this).chosen({width: "300"}); 
     $j('.search-field input').height(14); 

    }, 
    function(){ 
     //remove event 
    }); 

Answer 6

Nếu bạn thực sự muốn thử nghiệm "cơ bản nhất" Ví dụ, tôi muốn đề nghị:

1. Làm việc trên HTML được mã hóa cứng (so với html được thêm động)
2. Xóa tất cả các thuộc tính khỏi thành phần select
3. Chỉ thêm lại các thuộc tính cho thành phần select khi một ví dụ cơ bản chạy tốt.

Lưu ý rằng thuộc tính multiple="multiple" trên yếu tố select không hoạt động khác nhau.

Tôi đã chạy mã của bạn ở đây: http://jsfiddle.net/99Dkm/1/

Và nó hoạt động tốt.

Tôi nghi ngờ vấn đề không phải là thư viện chosen.js mà là cách bạn sử dụng nó (gói bên trong một số hàm onready cơ bản của jQuery bị thiếu hoặc khác).

Lưu ý rằng trong các ví dụ hoạt động của tôi trên jsFiddle, tôi chỉ bao gồm chosen.css & chosen.jquery.js.

lưu ý: có được các URL cho các tập tin (javascript & css) từ http://cdnjs.com/libraries/chosen

Answer 7

Các tài liệu về các lựa chọn Chosen bao gồm:

Nếu bạn chọn được ẩn khi Chosen là instantiated, bạn phải xác định chiều rộng hoặc lựa chọn sẽ hiển thị với chiều rộng là 0.

Để tránh trường có chiều rộng bằng không xuất hiện, bạn cần sử dụng opti "chiều rộng" bật hoặc đảm bảo Chọn ban đầu của bạn hiển thị khi bạn được chọn.