Как вы можете программно сообщить HTML select для выпадания (например, из-за мыши)?
Как вы можете программным способом вывести HTML SELECT (например, из-за мыши)?
Ответ 1
Вы не можете сделать это с помощью HTML-тега выбора, но вы можете сделать это с помощью JavaScript и HTML. Существует множество существующих элементов управления, которые делают это, например, список "предложить", прикрепленный к записи SO "интересный/игнорируемый тег", или поиск в Gmail для адресов электронной почты.
Существует множество элементов управления JavaScript + HTML, которые предоставляют эту возможность - ищите идеи для автозаполнения идей.
Смотрите эту ссылку для управления автозаполнением...http://ajaxcontroltoolkit.codeplex.com/
Ответ 2
На самом деле это возможно с HTML + Javascript, несмотря на то, что везде люди говорят, что это не так.
Однако это работает только на Chrome. Читайте больше, если вам интересно.
Согласно W3C Working Draft для HTML5, раздел 3.2.5.1.7. Интерактивный контент:
Некоторые элементы в HTML имеют поведение активации, что означает, что пользователь может активировать их. Это запускает последовательность событий, зависящих от механизма активации [...] , например, с использованием клавиатуры или голосового ввода или щелчками мыши.
Когда пользователь запускает элемент с определенным поведением активации иным способом, чем нажатие на него, действие по умолчанию для события взаимодействия должно состоять в выполнении шагов активации искусственного щелчка на элементе.
<select>, будучи интерактивным контентом, я считал, что можно программно отображать его <option>. После нескольких часов игры я обнаружил, что использование 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, , не стесняйтесь изменить эту скрипку.
Ответ 3
Ксавье Хо отвечает, как решить проблему в большинстве браузеров, находящихся в настоящее время. Но это хорошая практика "не отправлять/изменять" события по JavaScript больше. (Например, mousedown в этом случае)
В версии 53+ Google Chrome не будет выполнять действие по умолчанию для ненадежных событий. Такие события, созданные или измененные с помощью script, или отправленные методом dispatchEvent. Это изменение для выравнивания с Firefox и IE, которые, как я думаю, уже не выполняют действие.
В целях тестирования Fiddle при условии, что ответ Xavier не будет работать в chrome 53+. (Я не проверяю его FF и IE).
Ссылки для справки:
https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232
И initMouseEvent также устарел
Ответ 4
Это самое близкое, что я мог получить, изменить размер элемента 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>Ответ 5
У меня та же проблема, и я нашел более простой способ ее решения с помощью html и css.
select{
opacity: 0;
position: absolute;
}<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<button>click</button>Ответ 6
Я думаю, что это невозможно в Chrome.
Кажется, версия 53 chrome отключает эту функциональность, как указано Asim K T.
Согласно спецификации http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events
Надежные события не должны запускать действие по умолчанию (кроме кликов событие).
Однако они включили его в webview, но я этого не тестировал.
Мы обнаружили, что некоторые веб-просмотры используют fastclick внутри них и из-за риска поломки мы собираемся позволить mousedown при выборе даже если они не доверены.
И в этом обсуждении идея оставить разработчику открытое выпадающее меню программно заброшено.
Ответ 7
Если кто-то все еще ищет это:
<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; });
});
Update:
Один, пока не будет идеального решения этой проблемы, но вы можете попытаться избежать этого сценария. Почему ты хочешь сделать это. я задавался вопросом о решении несколько месяцев назад, чтобы сделать плагин для мобильных устройств
https://github.com/HemantNegi/jquery.sumoselect
Наконец, в итоге появилась маскировка пользовательского div (или любого другого элемента) с помощью прозрачного элемента select, чтобы он мог напрямую взаимодействовать с пользователем.
Ответ 8
Вот лучший способ, который я нашел. ПРИМЕЧАНИЕ. Это работает только с 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>
Ответ 9
Перестаньте думать, что одна вещь невозможна, ничего невозможного сделать, когда вы хотите сделать.
Используйте эту расширяемую функцию JS, созданную парнем.
http://code.google.com/p/expandselect/
Включите эту JS и просто вызовите, передавая параметр как ваш идентификатор выбора, например:
ExpandSelect(MySelect)
Ответ 10
Возможно, я ошибаюсь, но я не думаю, что это возможно при выборе по умолчанию. Вы можете сделать что-то с JS и CSS, которые достигают желаемого результата, но не (насколько мне известно) vanilla SELECT.
Ответ 11
Это не совсем то, что вы просили, но мне нравится это решение для его простоты. В большинстве случаев, когда я хочу инициировать раскрывающийся список, это потому, что я проверяю, что пользователь действительно сделал выбор. Я изменяю размер раскрывающегося списка и фокусирую его, что прекрасно подчеркивает то, что они пропустили:
$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();