สำหรับรายการแบบเลื่อนลงนี้ใน HTML:

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

ฉันต้องการเปิดรายการ (เช่นเดียวกับการคลิกซ้าย) เป็นไปได้ไหมโดยใช้ JavaScript (หรือเฉพาะ jQuery)

คุณสามารถจำลองการคลิกบนองค์ประกอบได้อย่างง่ายดายแต่การคลิก<select>จะไม่เปิดเมนูแบบเลื่อนลง

การใช้การเลือกหลายรายการอาจเป็นปัญหาได้ บางทีคุณควรพิจารณาปุ่มตัวเลือกภายในองค์ประกอบคอนเทนเนอร์ซึ่งคุณสามารถขยายและหดได้ตามต้องการ

ฉันพยายามค้นหาสิ่งเดียวกันและผิดหวัง ฉันลงเอยด้วยการเปลี่ยนขนาดแอตทริบิวต์สำหรับกล่องเลือกเพื่อให้ดูเหมือนว่าจะเปิดขึ้น

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

แล้วเมื่อคุณทำเสร็จ

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

ฉันเจอปัญหาเดียวกันและมีวิธีแก้ไข ฟังก์ชั่นที่เรียกว่า ExpandSelect () ที่เลียนแบบการคลิกเมาส์บนองค์ประกอบ "select" ทำได้โดยการสร้าง<select>องค์ประกอบอื่นที่มีตำแหน่งแน่นอนและมีหลายตัวเลือกให้เห็นพร้อมกันโดยการตั้งค่าsizeแอตทริบิวต์ ผ่านการทดสอบในเบราว์เซอร์หลักทั้งหมด: Chrome, Opera, Firefox, Internet Explorer คำอธิบายวิธีการทำงานพร้อมรหัสที่นี่:

แก้ไข (ลิงค์เสีย)

ฉันได้สร้างโครงการที่ Google Code ไปหารหัสที่นั่น:

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

ภาพหน้าจอ

มีความแตกต่างเล็กน้อยใน GUI เมื่อจำลองการคลิก แต่มันไม่สำคัญจริงๆให้ดูด้วยตัวคุณเอง:

เมื่อคลิกเมาส์:

_{(ที่มา: googlecode.com )}

เมื่อเลียนแบบการคลิก:

_{(ที่มา: googlecode.com )}

ภาพหน้าจอเพิ่มเติมในเว็บไซต์ของโครงการลิงค์ด้านบน

นี่เป็นคำตอบจากคำตอบด้านบนและใช้ความยาว / จำนวนตัวเลือกเพื่อให้สอดคล้องกับจำนวนตัวเลือกที่มีอยู่จริง

หวังว่านี่จะช่วยให้ใครบางคนได้รับผลลัพธ์ที่ต้องการ!

    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();
    }

สิ่งนี้ควรครอบคลุม:

 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

สิ่งนี้อาจถูกผูกไว้เช่นเหตุการณ์การกดแป้นดังนั้นเมื่อองค์ประกอบมีโฟกัสผู้ใช้สามารถพิมพ์และจะขยายโดยอัตโนมัติ ...

--บริบท--

  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);
 });

ง่ายๆวิธีง่ายๆ

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
}

ตอนนี้คุณสามารถเรียก DropDown ของคุณได้แบบนี้

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

ทำงานได้สมบูรณ์แบบสำหรับฉัน

อาจจะดีกว่าเพราะคุณไม่มีปัญหากับตำแหน่งขององค์ประกอบอื่น ๆ ในหน้า

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");
}

เปลี่ยน ID เป็นค่า fix mybe ไม่ฉลาด แต่ฉันหวังว่าคุณจะเห็นความคิด

เป็นไปไม่ได้ที่จาวาสคริปต์จะ "คลิก" ที่องค์ประกอบ (คุณสามารถทริกเกอร์onclickเหตุการณ์ที่แนบมาได้แต่คุณไม่สามารถคลิกได้อย่างแท้จริง)

หากต้องการดูรายการทั้งหมดในรายการให้ทำรายการ a multipleรายการและเพิ่มขนาดเช่น:

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

ไม่คุณทำไม่ได้

คุณสามารถเปลี่ยนขนาดเพื่อให้ใหญ่ขึ้น ... คล้ายกับ Dreas idea แต่เป็นขนาดที่คุณต้องเปลี่ยน

<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>

ฉันลองใช้คำตอบของ mrperfect และมีข้อผิดพลาดเล็กน้อย ด้วยการเปลี่ยนแปลงเล็ก ๆ น้อย ๆ สองสามอย่างฉันสามารถทำให้มันใช้งานได้จริง ฉันเพิ่งเปลี่ยนมันเพื่อที่จะทำเพียงครั้งเดียว เมื่อคุณออกจากเมนูแบบเลื่อนลงระบบจะกลับไปที่วิธีการแบบเลื่อนลงปกติ

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();
}

สิ่งหนึ่งที่ไม่ตอบโจทย์ก็คือจะเกิดอะไรขึ้นเมื่อคุณคลิกที่ตัวเลือกใดตัวเลือกหนึ่งในรายการเลือกหลังจากที่คุณทำ size = n ของคุณเสร็จแล้วและทำให้มันอยู่ในตำแหน่งที่แน่นอน

เนื่องจากเหตุการณ์เบลอทำให้มีขนาด = 1 และเปลี่ยนกลับเป็นลักษณะคุณควรมีสิ่งนี้เช่นกัน

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

นอกจากนี้หากคุณมีปัญหากับรายการเลือกตำแหน่งที่แน่นอนซึ่งแสดงอยู่ข้างหลังองค์ประกอบอื่น ๆ ให้ใส่ไฟล์

z-index: 100;

หรืออะไรทำนองนั้นในรูปแบบของการเลือก

ง่ายสุด ๆ :

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

ตามที่ระบุไว้คุณไม่สามารถเปิดไฟล์ <select>โดยใช้ JavaScript โดยใช้โปรแกรม

อย่างไรก็ตามคุณสามารถเขียน<select>จัดการรูปลักษณ์ทั้งหมดของคุณเองได้ สิ่งที่คุณเห็นสำหรับข้อความค้นหาที่เติมข้อความอัตโนมัติในGoogleหรือYahoo! หรือกล่องค้นหาตำแหน่งที่The Weather Networkอากาศเครือข่าย

ผมพบว่าหนึ่งสำหรับ jQuery ที่นี่ ฉันไม่รู้ว่าจะตรงกับความต้องการของคุณหรือไม่ แต่แม้ว่ามันจะไม่ตรงกับความต้องการของคุณอย่างสมบูรณ์ แต่ก็ควรจะแก้ไขได้เพื่อให้เปิดขึ้นเนื่องจากการกระทำหรือเหตุการณ์อื่น ๆ อันนี้ดูมีอนาคตมากกว่า

ฉันเพิ่งเพิ่ม

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

และเพิ่มเข้าไปในการเลือก

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

เพื่อให้มีลักษณะเหมือนคลาสสิก (ซ้อนทับส่วนที่เหลือของ html)

อาจจะช้า แต่นี่คือวิธีที่ฉันแก้ไข: 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');

                  }