截图

Question

对于HTML中的此下拉列表：

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

我想打开列表（与左键单击相同）。这可能是使用JavaScript（或更具体的jQuery）吗？

Answer 1

我试图找到同样的事情而感到失望。我最终更改了选择框的属性大小，因此它似乎打开

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

然后当你完成

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

Answer 2

我遇到了同样的问题，我有一个解决方案。一个名为ExpandSelect（）的函数模拟鼠标单击“select”元素，它通过创建另一个绝对位置的<select>元素并通过设置size属性一次可见多个选项来实现。在所有主流浏览器中测试过：Chrome，Opera，Firefox，Internet Explorer。解释它是如何工作的，以及这里的代码：

编辑（链接已损坏）。

我在Google Code上创建了一个项目，在那里找代码：

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

截图

在模拟点击时，GUI有一点点差异，但这并不重要，请亲自看看：

点击鼠标时

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

模仿点击时：

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

项目网站上的更多截图，链接如上。

Answer 3

您可以轻松simulate a click on an element，但点击<select>无法打开下拉列表。

使用多个选择可能会有问题。也许您应该考虑容器元素中的单选按钮，您可以根据需要进行扩展和收缩。

Answer 4

这应该涵盖它：

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

Answer 5

这是从上面的答案中汲取的，并使用选项的长度/数量来符合实际有多少选项。

希望这有助于有人获得他们需要的结果！

    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 6

简单易行。

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更改为修复值mybe不聪明，但我希望您能看到这个想法。

Answer 7

javascript无法“点击”某个元素（你可以触发附加的onclick事件，但你无法直接点击它）

要查看列表中的所有项目，请将列表设为multiple列表并增加其大小，如下所示：

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

Answer 8

不，你不能。

您可以更改尺寸以使其更大......类似于Dreas的想法，但它是您需要更改的尺寸。

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

我尝试使用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();
}

Answer 10

这一点没有回答的是当你完成尺寸= n并使其成为绝对定位后单击选择列表中的一个选项时会发生什么。

因为模糊事件使得size = 1并将其更改回原来的样子，所以你应该也有这样的东西

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

此外，如果您在显示其他元素后面的绝对定位选择列表时遇到问题，只需输入

即可

z-index: 100;

或类似选择风格的东西。

Answer 11

超级简单：

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

Answer 12

如前所述，您无法使用JavaScript以编程方式打开<select>。

但是，您可以编写自己的 <select> 来管理整个外观并感受自己。类似于您在Google或Yahoo!上的自动填充搜索字词或The Weather Network上的搜索位置框中看到的内容。

我为jQuery here找到了一个。我不知道它是否能满足您的需求，但即使它不能完全满足您的需求，也应该可以修改它，以便它可以作为其他一些动作或事件的结果打开。 This one实际上看起来更有希望。

Answer 13

也许迟到了，但这就是我解决它的方式： 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');

                  }

Answer 14

我刚刚添加了

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的其余部分重叠）

我可以使用jQuery打开下拉列表吗？

14 个答案:

截图