Как можно программно указать HTML SELECT, чтобы он выпал (например, из-за наведения курсора мыши)?

Как можно программно указать HTML, selectчтобы он раскрылся (например, при наведении курсора мыши)?

Вы не можете сделать это с помощью тега выбора HTML, но вы можете сделать это с помощью JavaScript и HTML. Для этого существует множество существующих элементов управления - например, список «предложений», прикрепленный к записи SO «интересный / игнорируемый тег», или поиск адресов электронной почты в Gmail.

Есть много элементов управления JavaScript + HTML, которые предоставляют такую ​​возможность - ищите элементы управления автозаполнением для идей.

См. Эту ссылку для элемента управления автозаполнением ... http://ajaxcontroltoolkit.codeplex.com/

Раньше это было возможно с HTML + Javascript, несмотря на то, что везде люди говорят, что это не так, но позже он устарел и не работает сейчас.

Однако это работало только в Chrome. Прочтите больше, если вам интересно.

Согласно рабочему проекту W3C для HTML5, раздел 3.2.5.1.7. Интерактивный контент :

Определенные элементы в HTML имеют поведение активации, что означает, что пользователь может их активировать. Это запускает последовательность событий, зависящих от механизма [...] активации, например, с помощью клавиатуры или голосового ввода, или посредством щелчков мышью .

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

<select>будучи интерактивным контентом, я полагал, что его файлы <option>s. После нескольких часов игры я обнаружил, что с помощью document.createEvent()и .dispatchEvent()работает.

Тем не менее, время демонстрации. Вот рабочий скрипт.

HTML:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​

Javascript:

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

Если кто-то найдет способ сделать то же самое, но не в Chrome, пожалуйста, не стесняйтесь изменять эту скрипку . Взаимодействие с другими людьми

В ответе Ксавьера Хо рассказывается, как решить эту проблему в большинстве существующих браузеров. Но это хорошая практика - больше не отправлять / изменять события с помощью JavaScript . (Подобно,mousedown в этом случае)

Начиная с версии 53+, Google Chrome не будет выполнять действия по умолчанию для ненадежных событий . Такие как события, созданные или измененные сценарием или отправленные черезdispatchEvent метода. Это изменение сделано для согласования с Firefox и IE, которые, как мне кажется, уже не выполняют действие.

В целях тестирования Fiddle предоставил ответ Ксавьера не будет работать в Chrome 53+. (Я не тестирую FF и IE).

Ссылки для справки:

https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232

И initMouseEvent также устарел

Это самое близкое, что я мог найти, изменить размер элемента onmouseover и восстановить размер onmouseout:

       <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>

У меня такая же проблема, и более простой способ решения, который я нашел, был с помощью html и css.

select{
  opacity: 0;
  position: absolute;
}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>

Я думаю, что в Chrome это больше невозможно.

Похоже, что версия 53 Chrome отключает эту функцию, как заявил Асим К. Т.

Согласно спецификации http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Доверенные события не должны запускать действие по умолчанию (кроме события щелчка).

Однако они включили его в веб-просмотре, но я не тестировал это.

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

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

Если кто-то все еще ищет это:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" >Show dropdown items</button>

Javascript:

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});

Обновить:

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

https://github.com/HemantNegi/jquery.sumoselect

Наконец, закончилось маскирование настраиваемого div (или любого другого элемента) прозрачным элементом выбора, чтобы он мог напрямую взаимодействовать с пользователем.

Вот лучший способ, который я нашел. ПРИМЕЧАНИЕ. Он работает только с IE в Windows, и ваш Интернет, вероятно, должен находиться в безопасной зоне, потому что мы получаем доступ к оболочке. Хитрость в том, что ALT-стрелка вниз - это сочетание клавиш для открытия выпадающего списка.

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button>
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
    <option>JKL</option>
</select>
<script type="text/javascript">
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
</script>

Перестаньте думать, что одно невозможно, что невозможно сделать, когда вы этого хотите.

Используйте эту расширенную функцию JS, созданную парнем.

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

Включите этот JS и просто вызовите его, передав параметр в качестве выбранного идентификатора, например:

ExpandSelect(MySelect)

Я могу ошибаться, но я не верю, что это возможно с полем выбора по умолчанию. Вы могли бы сделать что-то с JS и CSS, которое достигнет желаемого результата, но не (насколько мне известно) ванильный SELECT.

Открыть «HTML-выбор» можно с помощью некоторых обходных путей, упомянутых в этом вопросе и подобных. Однако более простой способ сделать это - добавить в проект выбранную библиотеку, например «select2» или «selected». Например, программно открыть select2 так же просто:

$('#target-select').select2('open');

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

$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();