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

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/

Скриншоты

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

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

Щелчок мышью http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

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

Эмуляция кликов http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

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

Answer 3

Вы можете легко смоделировать щелчок по элементу , но щелчок по <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");
}

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

Answer 7

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

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

Answer 8

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

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

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

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

z-index: 100;

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

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

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

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

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