Đối với danh sách thả xuống 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 vào nó). Điều này có thể sử dụng JavaScript (hoặc cụ thể hơn là jQuery) không?

Bạn có thể dễ dàng mô phỏng một lần nhấp vào một phần tử , nhưng một lần nhấp vào một phần tử<select> sẽ không mở ra menu 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à thu nhỏ khi cần.

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

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

và sau đó khi bạn hoàn thành

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

Tôi đã gặp vấn đề tương tự và tôi có giải pháp. Một hàm được gọi là ExpandSelect () mô phỏng cách nhấp chuột vào phần tử "select", nó thực hiện điều này bằng cách tạo một <select>phần tử khác được đặt đúng vị trí và có nhiều tùy chọn hiển thị cùng một lúc bằng cách đặt sizethuộc tính. Đã thử nghiệm trên tất cả các trình duyệt chính: Chrome, Opera, Firefox, Internet Explorer. Giải thích về cách nó hoạt động, cùng với mã ở đây:

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

Tôi đã tạo một dự án tại Google Code, hãy tìm mã ở đó:

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

Ảnh chụp màn hình

Có một chút khác biệt trong GUI khi mô phỏng nhấp chuột, nhưng nó không thực sự quan trọng, hãy tự mình xem:

Khi nhấp chuột:

_{(nguồn: googlecode.com )}

Khi nhấp chuột giả lập:

_{(nguồn: googlecode.com )}

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

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

Hy vọng điều này sẽ giúp ai đó có được kết quả 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();
    }

Điều này sẽ bao gồm nó:

 var event;
 event = document.createEvent('MouseEvents');
 event.initMouseEvent('mousedown', true, true, window);
 countries.dispatchEvent(event); //we use countries as it's referred to by ID - but this could be any JS element var

Ví dụ, điều này có thể được liên kết với một sự kiện nhấn phím, vì vậy khi phần tử có tiêu điểm, người dùng có thể nhập và nó sẽ tự động mở rộng ...

--Bối cảnh--

  modal.find("select").not("[readonly]").on("keypress", function(e) {

     if (e.keyCode == 13) {
         e.preventDefault();
         return false;
     }
     var event;
     event = document.createEvent('MouseEvents');
     event.initMouseEvent('mousedown', true, true, window);
     this.dispatchEvent(event);
 });

Đơ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 DropDown của mình giống như thế này

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

Hoạt động hoàn hảo cho tôi.

Có lẽ tốt hơn, vì bạn không gặp vấn đề gì với vị trí của các phiếu bầu 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 một giá trị sửa chữa mybe không thông minh nhưng tôi hy vọng bạn thấy lý tưởng.

Không thể cho javascript "nhấp" vào một phần tử (bạn có thể kích hoạt onclicksự kiện đính kèm , nhưng bạn không thể nhấp vào nó theo đúng nghĩa đen)

Để xem tất cả các mục trong danh sách, hãy tạo danh sách thành một multipledanh sách và tăng kích thước của nó, chẳng hạn như:

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

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

Bạn có thể thay đổi kích thước để làm cho nó lớn hơn ... tương tự như ý tưởng của 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>

Tôi đã thử sử dụng câu trả lời của mrperfect và tôi gặp 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 mình. 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 lại phương pháp thông thường của menu thả xuố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();
}

Một điều mà điều này không trả lời là điều gì sẽ 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 xong kích thước = n và đặt nó ở vị trí tuyệt đối.

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

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

Ngoài ra, nếu bạn đang gặp sự cố với danh sách lựa chọn được định vị tuyệt đối hiển thị phía sau các phần tử khác, chỉ cần đặt

z-index: 100;

hoặc một cái gì đó tương tự theo kiểu của vùng chọn.

Siêu đơn giản:

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

Như đã nói, bạn không thể mở một <select>cách lập trình bằng JavaScript.

Tuy nhiên, bạn có thể viết bản <select>quản lý toàn bộ giao diện của chính mình. Một cái gì đó giống như những gì bạn thấy cho các cụm từ tìm kiếm tự động hoàn thành trên Google hoặc Yahoo! hoặc hộp Tìm kiếm Vị trí tại Mạng lưới Thời tiết .

Tôi đã tìm thấy một cho jQuery ở đây . 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 vẫn có thể sửa đổi nó để nó mở ra do kết quả của một số hành động hoặc sự kiện khác. Cái này thực sự có vẻ hứa hẹn hơn.

tôi vừa thêm

select = $('#' + id);
length = $('#' + id + ' > option').length;
if (length > 20)
    length = 20;
select.attr('size', length);
select.css('position', 'absolute');
select.focus();

và thêm vào lựa chọn

onchange="$(this).removeAttr('size');"
onblur="$(this).removeAttr('size');"

để tạo giao diện giống như giao diện cổ điển (chồng lên phần còn lại của html)

Có thể muộn, nhưng đây là cách tôi giải quyết nó: http://jsfiddle.net/KqsK2/18/

$(document).ready(function() {
  fixSelect(document.getElementsByTagName("select"));
                      });                       

   function fixSelect(selectList)
            {
            for (var i = 0; i != selectList.length; i++)
              {

                 setActions(selectList[i]);
              }
            }


   function setActions(select)
            {
               $(select).click(function() {
                   if (select.getElementsByTagName("option").length == 1)
                        {
                          active(select);
                        }
                      });
                $(select).focus(function() {
                       active(select);
                       });
                $(select).blur(function() {
                       inaktiv(select);
                       });
                $(select).keypress(function(e) {
                      if (e.which == 13) {

                      inaktiv(select);
                          }
                       });
                  var optionList = select.getElementsByTagName("option");

                  for (var i = 0; i != optionList.length; i++)
                           {
                                setActionOnOption(optionList[i], select);
                           }
      }

  function setActionOnOption(option, select)
      {
                    $(option).click(function() {
                                inaktiv(select);
                        });
      }

  function active(select)
      {
          var temp = $('<select/>');
              $('<option />', {value: 1,text:$(select).find(':selected').text()}).appendTo(temp);
               $(temp).insertBefore($(select));

              $(select).attr('size', select.getElementsByTagName('option').length);
              $(select).css('position', 'absolute');
              $(select).css('margin-top', '-6px');
              $(select).css({boxShadow: '2px 3px 4px #888888'});



                        }

        function inaktiv(select)
                   {
                 if($(select).parent().children('select').length!=1)
                     {
                                             select.parentNode.removeChild($(select).parent().children('select').get(0));
                                }
                $(select).attr('size', 1);
                $(select).css('position', 'static');
                $(select).css({boxShadow: ''});
                $(select).css('margin-top', '0px');

                  }