Tôi có thể mở một DropDownList sử dụng jQuery

Question

Đối với DropDownList này trong HTML:

<select id="countries"> 
<option value="1">Country</option> 
</select> 

Tôi muốn để mở danh sách (giống như nhấp chuột trái trên nó). Điều này có thể sử dụng JavaScript (hoặc đặc biệt hơn jQuery) không?

Answer 1

Bạn có thể dễ dàng simulate a click on an element, nhưng một nhấp chuột vào một <select> sẽ không mở ra thả xuống.

Sử dụng nhiều lựa chọn có thể có vấn đề. Có lẽ bạn nên xem xét các nút radio bên trong phần tử vùng chứa mà bạn có thể mở rộng và hợp đồng khi cần.

Answer 2

Nó không phải là có thể cho javascript để "click" vào một yếu tố (u có thể kích hoạt các đính kèm onclick sự kiện, nhưng bạn có thể không theo nghĩa đen nhấp vào nó)

Để xem tất cả các mục trong danh sách, làm cho liệt kê một danh sách multiple và tăng kích thước của nó, giống như ví dụ:

<select id="countries" multiple="multiple" size="10"> 
<option value="1">Country</option> 
</select> 

Answer 3

Như đã nêu, bạn không thể lập trình mở một mã số sử dụng JavaScript <select>. Tuy nhiên, bạn có thể tự viết <select> quản lý toàn bộ giao diện của chính mình Nội dung giống như những gì bạn thấy cho cụm từ tìm kiếm tự động hoàn thành trên hộp Google hoặc Yahoo! hoặc hộp Tìm kiếm vị trí tại The Weather Network.

Tôi đã tìm thấy một cho jQuery here. Tôi không biết liệu nó có đáp ứng được nhu cầu của bạn hay không, nhưng ngay cả khi nó không hoàn toàn đáp ứng nhu cầu của bạn, bạn có thể sửa đổi nó để nó sẽ mở ra như là kết quả của một hành động hay sự kiện nào đó. This one thực sự trông có vẻ hứa hẹn hơn.

Answer 4

Không, bạn không thể.

Bạn có thể thay đổi kích thước để làm cho kích thước lớn hơn ... tương tự như ý tưởng Dreas, nhưng đó là kích thước bạn cần thay đổi.

<select id="countries" size="6"> 
    <option value="1">Country 1</option> 
    <option value="2">Country 2</option> 
    <option value="3">Country 3</option> 
    <option value="4">Country 4</option> 
    <option value="5">Country 5</option> 
    <option value="6">Country 6</option> 
</select> 

Answer 5

Tôi đã cố gắng tìm thấy điều tương tự và đã thất vọng. tôi đã kết thúc thay đổi kích thước thuộc tính cho hộp chọn để nó xuất hiện để mở

$('#countries').attr('size',6); 

và sau đó khi bạn đã hoàn tất

$('#countries').attr('size',1); 

Answer 6

tôi đã đi qua cùng một vấn đề và tôi có một dung dịch. Một hàm gọi là ExpandSelect() mô phỏng click chuột vào phần tử "select", nó làm như vậy bằng cách tạo ra một phần tử <select> khác được đặt hoàn toàn và có nhiều tùy chọn cùng một lúc bằng cách thiết lập thuộc tính size. Thử nghiệm trong tất cả các trình duyệt chính: Chrome, Opera, Firefox, Internet Explorer. Giải thích cách hoạt động, cùng với mã tại đây:

Chỉnh sửa (liên kết bị hỏng).

tôi đã tạo ra một dự án tại Google Code, đi cho đoạn code đó:

http://code.google.com/p/expandselect/

Ảnh chụp màn hình

Có một sự khác biệt nhỏ trong GUI khi bắt chước cú nhấp chuột, nhưng nó không thực sự vấn đề, nhìn thấy nó cho chính mình:

Khi nhấp chuột:

MouseClicking http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

Khi bắt chước nhấp chuột:

EmulatingClicking http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

Nhiều ảnh chụp màn hình trên trang web của dự án, liên kết ở trên.

Answer 7

Đơn giản một cách dễ dàng.

function down(what) { 
    pos = $(what).offset(); // remember position 
    $(what).css("position","absolute"); 
    $(what).offset(pos); // reset position 
    $(what).attr("size","10"); // open dropdown 
} 

function up(what) { 
$(what).css("position","static"); 
$(what).attr("size","1"); // close dropdown 
} 

Bây giờ bạn có thể gọi thả xuống bạn chỉ cần như thế này

<select onfocus="down(this)" onblur="up(this)"> 

Làm việc hoàn hảo cho tôi.

Có thể tốt hơn, bởi vì bạn không có vấn đề gì với vị trí của các elem khác trên trang.

function down(was) { 
a = $(was).clone().attr('id','down_man').attr('disabled',true).insertAfter(was); 
$(was).css("position","absolute").attr("size","10"); 
} 

function up(was) { 
$('#down_man').remove(); 
$(was).css("position","static"); 
$(was).attr("size","1"); 
} 

Thay đổi ID thành giá trị cố định nhưng không phải thông minh nhưng tôi hy vọng bạn thấy người nhận diện.

Answer 8

Tôi đã thử sử dụng câu trả lời của mrperfect và tôi đã có một vài trục trặc. Với một vài thay đổi nhỏ, tôi đã có thể làm cho nó hoạt động cho tôi. Tôi chỉ thay đổi nó để nó sẽ chỉ làm điều đó một lần. Khi bạn thoát khỏi menu thả xuống, nó sẽ quay trở lại phương thức thả xuống thông thường.

function down() { 
    var pos = $(this).offset(); // remember position 
    $(this).css("position", "absolute"); 
    $(this).offset(pos); // reset position 
    $(this).attr("size", "15"); // open dropdown 
    $(this).unbind("focus", down); 
} 
function up() { 
    $(this).css("position", "static"); 
    $(this).attr("size", "1"); // close dropdown 
    $(this).unbind("change", up); 
} 
function openDropdown(elementId) { 
    $('#' + elementId).focus(down).blur(up).focus(); 
} 

Answer 9

Một điều mà điều này không trả lời là điều xảy ra khi bạn nhấp vào một trong các tùy chọn trong danh sách lựa chọn sau khi bạn đã thực hiện kích thước = n và đặt vị trí tuyệt đối.

Bởi vì sự kiện mờ làm cho nó size = 1 và thay đổi nó trở lại cách hiển thị, bạn nên có một cái gì đó như thế này cũng

$("option").click(function(){ 
    $(this).parent().blur(); 
}); 

Ngoài ra, nếu bạn đang gặp vấn đề với cái tuyệt đối vị trí chọn danh sách hiển thị phía sau các phần tử khác, chỉ cần đặt một số

z-index: 100; 

hoặc tương tự như kiểu đó.

Answer 10

Điều này được tạo ra từ các câu trả lời ở trên và sử dụng độ dài/số tùy chọn để phù hợp với số lượng tùy chọn thực tế.

Hy vọng điều này sẽ giúp ai đó nhận được kết quả mà họ cần!

function openDropdown(elementId) { 
     function down() { 
      var pos = $(this).offset(); // remember position 
      var len = $(this).find("option").length; 
       if(len > 20) { 
        len = 20; 
       } 

      $(this).css("position", "absolute"); 
      $(this).css("zIndex", 9999); 
      $(this).offset(pos); // reset position 
      $(this).attr("size", len); // open dropdown 
      $(this).unbind("focus", down); 
      $(this).focus(); 
     } 
     function up() { 
      $(this).css("position", "static"); 
      $(this).attr("size", "1"); // close dropdown 
      $(this).unbind("change", up); 
      $(this).focus(); 
     } 
     $("#" + elementId).focus(down).blur(up).focus(); 
    } 

Answer 11

siêu đơn giản:

var state = false; 
$("a").click(function() { 
    state = !state; 
    $("select").prop("size", state ? $("option").length : 1); 
});