kích hoạt một lựa chọn yếu tố hình thức để hiển thị tùy chọn của nó (mở danh sách thả xuống tùy chọn) với Javascript

Question

Dưới đây là đánh dấu

<select id="person_prefix" name="prefix"> 
<option value=""></option> 
<option value="Dr" selected="selected">Dr</option> 
<option value="Mr">Mr</option> 
<option value="Ms">Ms</option> 
<option value="Mrs">Mrs</option> 
</select> 

và tôi muốn tạo ra hiện tượng javascript để các danh sách lựa chọn thả xuống. Sử dụng jquery Tôi đã thử những điều sau đây:

$("#person_prefix").click(); 
$("#person_prefix").mousedown(); 
$("#person_prefix").change(); 

nhưng không có gì có vẻ hiệu quả. Sự kiện này là gì và làm thế nào có thể được kích hoạt?

Cảm ơn

Answer 1

Bạn không thể thực hiện trình duyệt chéo này theo chương trình. Bạn có thể thay thế menu thả xuống có giải pháp hoàn toàn tùy chỉnh không thực sự hiển thị hiển thị thành phần <select> ... nhưng bạn không thể hiển thị chương trình đó, đặc biệt là trong IE.

Các gần bạn có thể làm là di chuyển người dùng đến các phần tử qua .focus():

$("#person_prefix").focus(); 

này với một số phong cách CSS cho khi nó tập trung (:focus) thường là một cách khá tốt để gây sự chú ý đến nó.

Answer 2

Nếu bạn đặt thuộc tính kích thước, lựa chọn sẽ hiển thị số lượng tùy chọn bạn chỉ định về kích thước.

var sel= document.getElementsByName('select_1')[0]; 
var len= '10'// or sel.options.length; 
// safest: var len=sel.getElementsByTagName('*').length; 
sel.setAttribute('size',len) 

Đặt kích thước trở lại '1' thu gọn lựa chọn.

Answer 3

Bạn không thể kích hoạt nhấp chuột sự kiện trên một số yếu tố hình thức nhưng cách giải quyết đúng đắn là plugin này:
jQuery.customSelect

Ưu điểm lớn nhất là nó ra mắt select yếu tố thực tế (bạn thực sự nhấp chuột vào một vô hình chọn - opacity: 0), điều quan trọng trên thiết bị di động (ví dụ: iPhone có bố cục riêng để hiển thị các tùy chọn select's).

Nếu bạn không muốn tải xuống toàn bộ plugin, bạn có thể tự mình chuẩn bị giải pháp vì bạn biết cách kích hoạt select (ẩn nó bằng cách đặt opacity: 0 - nó sẽ vẫn có thể nhấp).

Answer 4

xây dựng trên @ câu trả lời Kennebec, một phiên bản jQuery để có được một số các tùy chọn và optgroups:

var sel = $('select.mySelectClass'); 
var count=0; 

sel.find('option').each(function() { 

    count++; 
}); 

sel.find('optgroups').each(function() { 

    count++; 
}); 

sel.attr('size',count); 

Answer 5

Tôi đã từng tìm kiếm làm thế nào để làm điều tương tự và không tìm thấy bất kỳ giải pháp làm việc nhưng sau đó một chàng trai trong nhóm javascript của chúng tôi đến với một công việc thông minh xung quanh. Đây là mã.

HTML

<input type="button" id="show" value="show" /> 
<select id="myslect"> 
    <option>nothing</option> 
    <option>something</option> 
    <option>anything</option> 
</select> 

Javascript

$("#show").click(function() { 
    var element = $("select")[0], 
     worked = false; 
    if(document.createEvent) { // chrome and safari 
     var e = document.createEvent("MouseEvents"); 
     e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     worked = element.dispatchEvent(e); 
    } 
    if(!worked) { // unknown browser/error 
     alert("It didn't worked in your browser."); 
    } 
}); 

Tôi không chắc chắn làm thế nào để liên kết đến các bài nhóm để bạn có thể nhìn thấy toàn bộ chủ đề. Dù sao đi chăng nữa cho CJ Madolara. Làm tốt lắm!

Cập nhật:Chỉ hoạt động trên Chrome và Safari