Как автоматически развернуть HTML выделить элемент в JavaScript

Question

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

Когда вы нажимаете кнопку, он вызывает некоторый 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 # не имеет метода 'click'

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

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

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

Answer 1

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

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

Скриншоты

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

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

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

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

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

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

Answer 2

Самый простой способ - использовать атрибут «множественный» в HTML

<select multiple></select>

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

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

Answer 3

Здесь простое решение, АВТО-РАСШИРЕННОЕ меню выбора (все опции видны)

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

Answer 4

Пожалуйста, попробуйте это:

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()
}

Answer 5

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

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

Вы забыли #