Могу ли я открыть выпадающий список с помощью jQuery

Для этого выпадающего списка в HTML:

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

Я хотел бы открыть список (так же, как щелкнуть по нему левой кнопкой мыши). Возможно ли это с помощью JavaScript (или, более конкретно, jQuery)?

11.12.2008 18:46:56
Кто-нибудь может объяснить, почему это так невозможно?
SpaceBeers 25.04.2014 21:12:03
Hayden Thring 14.08.2017 11:30:54
14 ОТВЕТОВ
РЕШЕНИЕ

Вы можете легко смоделировать щелчок по элементу , но при щелчке по нему <select>не открывается раскрывающийся список.

Использование нескольких вариантов выбора может быть проблематичным. Возможно, вам следует рассмотреть переключатели внутри элемента контейнера, который вы можете расширять и сжимать по мере необходимости.

15
11.12.2008 18:59:22

Для javascript невозможно «щелкнуть» по элементу (вы можете вызвать вложенное onclickсобытие, но вы не можете буквально щелкнуть по нему)

Чтобы просмотреть все элементы в списке, сделайте список multipleсписком и увеличьте его размер, например:

<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>
2
11.12.2008 19:24:05
Добавляет полосу прокрутки после 4 элементов в IE6, 7 и 8b2 и Opera 9.62. Добавляет полосу прокрутки после 10 элементов в Safari для Windows и Google Chrome.
Grant Wagner 11.12.2008 19:01:15

Как уже было сказано, вы не можете программно открыть с <select>помощью JavaScript.

Тем не менее, вы можете написать свой собственный, <select>управляя всем внешним видом и чувствовать себя. Что-то вроде того, что вы видите для автозаполненных поисковых терминов в Google или Yahoo! или окно поиска местоположения в сети погоды .

Я нашел один для jQuery здесь . Я понятия не имею, будет ли он соответствовать вашим потребностям, но даже если он не полностью соответствует вашим потребностям, можно изменить его так, чтобы он открывался в результате какого-либо другого действия или события. Этот на самом деле выглядит более перспективным.

1
11.12.2008 19:15:04

Нет, ты не можешь.

Вы можете изменить размер, чтобы сделать его больше ... похоже на идею 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>
2
11.12.2008 19:20:03

Я пытался найти то же самое и разочаровался. Я закончил тем, что изменил размер атрибута для поля выбора, чтобы оно открылось

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

а потом, когда вы закончите

$('#countries').attr('size',1);
67
21.12.2010 10:36:06
добавление sizeатрибута в выпадающий список фактически преобразует выпадающий список в Listbox .. таким образом, он расширяется ..
Mayank Pathak 31.08.2012 06:24:01
Отличное решение. Вам просто нужно иметь дело с тем фактом, что список занимает больше места на странице (вместо того, чтобы расширяться по содержимому как выпадающий список) и, таким образом, выталкивает содержимое вниз.
zkent 28.10.2014 19:32:20
Для тех, кто может только представить, как это выглядит, внешний вид - это поле с множественным выбором после использования этого подхода (но не с множественным выбором), которое я лично считаю более стабильным, чем открытие раскрывающегося списка.
Siwei 23.12.2014 22:15:40
Технически это работает, но 1) у вас теперь есть уродливая полоса прокрутки вниз, и 2) z-index зафиксирован на исходном выделении, поэтому он также не действует как выпадающее меню.
BoB3K 17.05.2016 16:34:21
Спасибо за это ... Я потратил 2 часа, пробуя различные всплывающие окна и т. Д., Чтобы предупредить пользователей, что они должны что-то выбрать. Ничего не получалось ... это тонкое, но твердое напоминание. И это работает (в отличие от других нестабильных решений).
11teenth 29.08.2017 17:32:54

Я сталкивался с той же проблемой, и у меня есть решение. Функция ExpandSelect (), которая эмулирует щелчок мышью на элементе «select», делает это путем создания другого <select>элемента, который абсолютно позиционирован и имеет несколько параметров, видимых одновременно, путем установки sizeатрибута. Протестировано во всех основных браузерах: Chrome, Opera, Firefox, Internet Explorer. Объяснение того, как это работает, вместе с кодом здесь:

Редактировать (ссылка была сломана) .

Я создал проект в Google Code, перейдите к коду:

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

Скриншоты

Существует небольшая разница в графическом интерфейсе при эмуляции щелчка, но это не имеет значения, убедитесь сами:

При щелчке мышью:

MouseClicking
(источник: googlecode.com )

При эмуляции нажмите:

EmulatingClicking
(источник: googlecode.com )

Больше скриншотов на сайте проекта, ссылка выше.

15
14.08.2019 11:04:08
Можете ли вы опубликовать jsfiddle для этого?
Jay Sullivan 8.07.2013 16:30:24

Простой легкий способ.

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

Изменить идентификатор на фиксированное значение, возможно, не умный, но я надеюсь, что вы видите идею.

5
5.04.2012 21:22:33

Я попытался использовать ответ 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();
}
2
19.04.2012 19:06:25

Одна вещь, на которую это не отвечает, - это то, что происходит, когда вы нажимаете на одну из опций в списке выбора после того, как вы сделали size = n и сделали его абсолютным позиционированием.

Поскольку событие размытия делает его size = 1 и изменяет его на внешний вид, у вас должно получиться что-то подобное

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

Кроме того, если у вас есть проблемы с списком выбора с абсолютным позиционированием, отображаемым позади других элементов, просто поместите

z-index: 100;

или что-то подобное в стиле выбора.

2
2.05.2012 18:30:23

Это вытекает из приведенных выше ответов и использует длину / количество опций, чтобы соответствовать количеству возможных вариантов.

Надеюсь, что это поможет кому-то получить необходимые результаты!

    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();
    }
9
1.06.2012 04:53:21

Супер просто:

var state = false;
$("a").click(function () {
    state = !state;
    $("select").prop("size", state ? $("option").length : 1);
});
2
25.05.2013 12:41:22
это не то же самое, что открыть его. когда список внизу страницы, если я его открываю, он открывается вверх. если я изменяю его размер, он «открывается» вниз, ниже, где я могу нажать. ничего хорошего
ekkis 17.02.2017 02:06:55
@ekkis Описанное поведение может отличаться на разных устройствах и в разных браузерах. Я протестировал свое предлагаемое решение с Firefox, Google Chrome и Opera для настольных компьютеров и Safari для мобильных устройств, где оно работает, как и ожидалось. Прыжок прокрутки можно легко исправить, сохранив / восстановив смещение прокрутки при открытии / закрытии или, возможно, с помощью scrollIntoViewклавиши <select>.
yckart 18.02.2017 04:45:23

Может быть поздно, но я так решил: 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');

                  }
-1
20.08.2013 09:02:46

Это должно покрыть это:

 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

Это может быть связано, например, с событием нажатия клавиши, поэтому, когда элемент находится в фокусе, пользователь может напечатать текст, и он автоматически развернется ...

--Context--

  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);
 });
9
10.10.2014 10:57:16
работал на меня! любой другой ответ предполагал, что нет способа вызвать выбор, пока вы не нашли его, есть ли недостатки этого подхода?
kittyminky 24.08.2015 00:57:10
Да - это мешает вкладкам событий (я думаю!), Это зависит от ваших потребностей - но это сработало, как ожидалось - но не соответствовало нашим другим потребностям.
Stuart.Sklinar 24.08.2015 11:35:11
Работал на меня. Если вы звоните из другого обработчика событий, не забудьте вывести элемент dom -$('#select_element').get(0).dispatchEvent(event);
BoB3K 17.05.2016 16:45:51
это не работает для меня. работает на Chrome 56.0.2924 на OSX
ekkis 17.02.2017 02:11:00

я только добавил

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)

0
13.12.2016 09:19:58