У меня есть (скрытый) объект выделения html в моем меню, прикрепленный к ссылке кнопки меню, так что нажатие ссылки показывает список, чтобы вы могли выбрать его.Как автоматически развернуть элемент html select в javascript

Когда вы нажимаете кнопку, он вызывает некоторый javascript, чтобы показать <select>. Щелчок от <select> скрывает список. Я действительно хочу, чтобы <select> отображался полностью расширенным, как если бы вы нажали на стрелку вниз, но я не могу заставить это работать. Я пробовал много разных подходов, но не могу добиться успеха. Что я делаю в данный момент заключается в следующем:

<li> 
    <a href="javascript:showlist();"><img src="/images/icons/add.png"/>Add favourite</a> 
    <select id="list" style="display:none; onblur="javascript:cancellist()"> 
    </select> 
</li> 

// in code 
function showlist() { 
    //using prototype not jQuery 
    $('list').show(); // shows the select list 
    $('list').focus(); // sets focus so that when you click away it calles onblur() 
}

Я пытался дозвониться $('list').click().
Я попытался установить onfocus="this.click()" Но в обоих случаях я получаю

Uncaught TypeError: Object # has no method 'click'

которая свойственна, как link text говорит, что он поддерживает стандартные функции.

Я попытался установить .size = .length, который работает, но не имеет такой же внешний вид (как при нажатии кнопки, чтобы открыть элемент, он плывет по остальной части страницы.)

Кто-нибудь есть какие-либо предложения?

источник

2010-05-27 xan

возможно дубликат [Open Select с помощью JavaScript/JQuery?] (http://stackoverflow.com/questions/2048213/open-select-using-javascript-jquery) –

возможного дубликата из [Как вы можете программным способом вывести HTML SELECT (например, из-за мыши)] (http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select -t-drop-down-for-example-due-t) – CMS

Аналогичные проблемы - спасибо, что указали их - они, похоже, больше ищут варианты для размера элемента управления (ширина и высота), тогда как все, что я хочу сделать это, чтобы он выглядел «открытым». – xan

-1

У вас есть синтаксическая ошибка. Оно должно быть:

$('#list').click();

Вы забыли #

источник

2010-05-27 18:07:37 Anthony

Верно, но 'click' не будет расширять элемент' select'. – CMS

Не в прототипе я верю ... – xan

я столкнулся с той же проблемой, хотел реализовать навигации с помощью клавиатуры в моем приложении, но выбрать элементы, которые не были расширены, так что люди с помощью клавиатуры были теряя функциональность. Я создал функцию ExpandSelect(), которая эмулирует щелчки мыши на элементах выбора, создавая еще один <select> с несколькими параметрами, видимыми сразу, установив атрибут size, код размещен на веб-сайте Google Code, ExpandSelect.js - всего 4 KB, увидеть скриншоты и скачать его здесь:

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

Скриншоты

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

Когда мышь щелчок:

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

При эмулировать нажатие:

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

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

источник

2011-11-09 19:14:37

-1

Пожалуйста, попробуйте следующее:

function showlist() { 
    //using prototype not jQuery 
    $('#list').show(); // shows the select list 
    $('#list').focus(); // sets focus so that when you click away it calles onblur() 
}

источник

2012-10-10 05:49:34

Я застрял ваш код в [JSFiddle] (http://jsfiddle.net/URXyQ/), и он не работает. Поле выбора получает фокус, но оно не расширяется. (Chrome на Win7.) –

@ RoddyoftheFrozenPeas только что я увидел ваш JSFiddle. пожалуйста, примените select box is display: none; css свойство. и в скрипте используйте $ ('# list') вместо $ ('list'), а в левой стороне JSFiddle выберите jquery 1.8.2 –

В вашем ответе в вашем ответе говорится: «Использовать прототип не jQuery». Также он все еще не работает. [Обновлен скрипка] (http://jsfiddle.net/URXyQ/3/). Пока он показывает выбор, он не расширяет его. (Chrome, Win7.) –

Вот простое решение, AUTO-EXPANDED выберите меню (все варианты видны)

<select name="ddlTestSelect" id="ddlTestSelect" style="width:200px;position:absolute;"> 
    <option selected="selected" value="0">defaulttt</option> 
    <option>option 2</option> 
    <option>option 3</option> 
    <option>option 4</option> 
</select> 
<script type="text/javascript"> 
var slctt=document.getElementById("ddlTestSelect"); 
slctt.size=slctt.options.length;if(slctt.options.length>1)slctt.style.width='470px'; 
</script>

источник

2014-03-10 08:34:08

-2

Самый простой способ заключается в использовании "множественный" атрибут в HTML

<select multiple></select>

и вы также можете добавить атрибут стиля в установить высоту списка

<select multiple style="height:150px;"></select>

источник

2015-03-20 16:10:40

Как автоматически развернуть элемент html select в javascript

ответ

Скриншоты

Смежные вопросы