2012-03-12 23 views
6

Tôi có một html chọn:Có sự kiện "chọn hộp tiết lộ" JavaScript hay thứ gì đó tương tự không? (Sử dụng jQuery)

<select> 
    <option>Choose one</option> 
</select> 

Sử dụng jQuery, là có một sự kiện tôi có thể nắm bắt được khi danh sách lựa chọn tùy chọn đã được tiết lộ? (lý do tôi cần điều này là vì tôi muốn trì hoãn dân số của danh sách cho đến thời điểm danh sách cần được hiển thị cho người dùng).

mousedown hoạt động khi họ nhấp vào nó, nhưng không làm bất cứ điều gì nếu chúng tab và nhấn enter.

focus cũng hoạt động để nhấp và hầu như hoạt động cho tabbing, nhưng nó ngay lập tức kích hoạt khi tabbing đến đó thay vì đợi cho đến khi họ nhấn enter để hiển thị danh sách tùy chọn. (Đây là một vấn đề bởi vì nếu họ tab nó và sau đó tab trên mà không cần nhấn Enter, tôi không muốn sự kiện để bắn).

Tôi thậm chí đã đưa ra ghê tởm này:

var select_reveal = function(ev) { ... } 
$('select').on('mousedown', select_reveal).on('keydown', function(ev) { 
    // character code 9 is tab 
    if (ev.which !== 9) select_reveal.bind(this)(ev); 
}); 

Điều này thực sự seems to work. Nó thậm chí hoạt động cho trường hợp họ gõ một chữ cái bảng chữ cái (nó điền danh sách sau đó nhảy đến tùy chọn đầu tiên bắt đầu bằng chữ cái đó). Nhưng như tôi đã nói, đây là một phần của một sự ghê tởm. Nó cũng là một chút hacky chỉ cần kiểm tra cho "tab" như một ngoại lệ - chắc chắn có những ngoại lệ khác mà sẽ không gây ra các lựa chọn được tiết lộ.

Có sự kiện đơn giản bao gồm trường hợp sử dụng này (hoặc ít nhất một điều gì đó ít có khả năng chi trả hơn) không?

(Lưu ý: Tôi biết có các lựa chọn thay thế để cấu trúc hệ thống như thế này - ví dụ: bằng cách điền các tùy chọn trước khi thay đổi thay vì hiển thị lựa chọn, nhưng tôi không tìm kiếm đề xuất thay thế , chỉ cần tự hỏi nếu có một giải pháp cho vấn đề một cách rõ ràng đặt ra).

+2

Có vẻ như bạn đang tìm kiếm một sự kiện xảy ra trước khi lựa chọn được mở rộng nhưng đủ sớm để bạn có thể thay đổi danh sách mục đúng không? – JaredPar

+0

@JaredPar, đúng. –

+0

Tab Enter không tiết lộ các tùy chọn. Liên kết với mousedown là đủ. –

Trả lời

4

Tôi không chắc chắn bạn muốn hỗ trợ trình duyệt nào nhưng trước khi bạn đi quá xa con đường này, hãy lưu ý rằng nếu bạn thay đổi nội dung của danh sách chọn (ví dụ: thêm/thay đổi/xóa tùy chọn) thực sự nuốt sự kiện (mouseclick hoặc focus) sẽ mở danh sách và để người dùng có danh sách lựa chọn đã đóng. Xem tại đây để biết chi tiết: http://webbugtrack.blogspot.com/2009/02/bug-487-onclickonfocus-bugs-on-select.html

Tôi nghĩ nếu bạn thực sự cảm thấy sẽ có lợi ích để trì hoãn tải ... Tôi sẽ ẩn/tắt danh sách lựa chọn khi tải ban đầu và kích hoạt tải không đồng bộ các tùy chọn sau đã được hiển thị ... bật lại/hiển thị lựa chọn khi đã sẵn sàng.

+1

Tôi không biết về IE, cảm ơn! –

Các vấn đề liên quan