Для этого выпадающего списка в HTML:
<select id="countries">
<option value="1">Country</option>
</select>
Я хотел бы открыть список (так же, как щелкнуть левой кнопкой мыши по нему). Возможно ли это с использованием JavaScript (или, более конкретно, jQuery)?
Вы можете легко имитировать щелчок по элементу, но щелчок на <select> не откроет раскрывающийся список.
Использование нескольких выборок может быть проблематичным. Возможно, вам стоит рассмотреть радиокнопки внутри элемента контейнера, которые вы можете расширять и сжимать по мере необходимости.
Я пытался найти то же самое и разочаровался. Я закончил тем, что изменил размер атрибута для поля выбора, чтобы он выглядел открытым
$('#countries').attr('size',6);
а затем, когда вы закончите
$('#countries').attr('size',1);
Я сталкивался с той же проблемой, и у меня есть решение. Функция с именем ExpandSelect(), которая эмулирует щелчок мышью на элементе "select", делает это путем создания другого элемента <select>, который абсолютно позиционирован и имеет несколько параметров, видимых одновременно, путем установки атрибута size. Протестировано во всех основных браузерах: Chrome, Opera, Firefox, Internet Explorer. Объяснение того, как это работает, вместе с кодом здесь:
Изменить (ссылка была разорвана).
Я создал проект в Google Code, перейдите к коду:
http://code.google.com/p/expandselect/
Существует небольшая разница в графическом интерфейсе при эмуляции щелчка, но это не имеет значения, убедитесь сами:
При щелчке мышью:
(источник: googlecode.com)
При эмуляции нажмите:
(источник: googlecode.com)
Больше скриншотов на сайте проекта, ссылка выше.
Это должно охватывать его:
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
countries.dispatchEvent(event); //we use countries as it 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);
});
Это объясняется вышеизложенными ответами и использует длину/количество опций, чтобы соответствовать количеству вариантов на самом деле.
Надеюсь, что это поможет кому-то получить нужные результаты!
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();
}
Простой простой способ.
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");
}
Измените идентификатор на значение fix mybe not smart, но я надеюсь, что вы видите идеал.
javascript не может быть "click" для элемента (u может запускать прикрепленное событие onclick, но вы не можете его буквально щелкнуть)
Чтобы просмотреть все элементы в списке, сделайте список a multiple и увеличьте его размер, например:
<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>
Нет, вы не можете.
Вы можете изменить размер, чтобы увеличить его... аналогично идее Dreas, но это размер, который вам нужно изменить.
<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>
Я попытался использовать 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();
}
Одна вещь, на которую это не отвечает, - это то, что происходит, когда вы нажимаете на одну из опций в списке выбора после того, как сделали свой размер = n и сделали это абсолютное позиционирование.
Поскольку событие размытия делает его size = 1 и изменяет его на то, как оно выглядит, вы также должны иметь что-то вроде этого
$("option").click(function(){
$(this).parent().blur();
});
Кроме того, если у вас возникли проблемы с абсолютным позиционированным списком выбора, отображаемым за другими элементами, просто поставьте
z-index: 100;
или что-то подобное в стиле выбора.
Супер простой:
var state = false;
$("a").click(function () {
state = !state;
$("select").prop("size", state ? $("option").length : 1);
});
Как уже было сказано, вы не можете программно открыть <select> с помощью JavaScript.
Однако вы можете написать свой собственный <select>, управляющий всем внешним видом и ощущением себя. Что-то вроде того, что вы видите для условий поиска автозаполнения на Google или Yahoo! или поле "Поиск местоположения" в "Погода" .
Я нашел один для jQuery здесь. Я не знаю, будет ли это соответствовать вашим потребностям, но даже если это не полностью соответствует вашим потребностям, должно быть возможно изменить его, чтобы он открывался в результате каких-либо других действий или событий. Этот действительно выглядит более перспективным.
Возможно, поздно, но вот как я решил это: http://jsfiddle.net/KqsK2/18/
$(document).ready(function() {
fixSelect(document.getElementsByTagName("select"));
});
function fixSelect(selectList)
{
for (var i = 0; i != selectList.length; i++)
{
setActions(selectList[i]);
}
}
function setActions(select)
{
$(select).click(function() {
if (select.getElementsByTagName("option").length == 1)
{
active(select);
}
});
$(select).focus(function() {
active(select);
});
$(select).blur(function() {
inaktiv(select);
});
$(select).keypress(function(e) {
if (e.which == 13) {
inaktiv(select);
}
});
var optionList = select.getElementsByTagName("option");
for (var i = 0; i != optionList.length; i++)
{
setActionOnOption(optionList[i], select);
}
}
function setActionOnOption(option, select)
{
$(option).click(function() {
inaktiv(select);
});
}
function active(select)
{
var temp = $('<select/>');
$('<option />', {value: 1,text:$(select).find(':selected').text()}).appendTo(temp);
$(temp).insertBefore($(select));
$(select).attr('size', select.getElementsByTagName('option').length);
$(select).css('position', 'absolute');
$(select).css('margin-top', '-6px');
$(select).css({boxShadow: '2px 3px 4px #888888'});
}
function inaktiv(select)
{
if($(select).parent().children('select').length!=1)
{
select.parentNode.removeChild($(select).parent().children('select').get(0));
}
$(select).attr('size', 1);
$(select).css('position', 'static');
$(select).css({boxShadow: ''});
$(select).css('margin-top', '0px');
}
Я просто добавил
select = $('#' + id);
length = $('#' + id + ' > option').length;
if (length > 20)
length = 20;
select.attr('size', length);
select.css('position', 'absolute');
select.focus();
и добавьте в select
onchange="$(this).removeAttr('size');"
onblur="$(this).removeAttr('size');"
чтобы сделать тот же внешний вид, что и классический (перекрывайте остальные html)