JavaScript не может "щелкнуть" элемент (вы можете вызвать прикрепленное событие onclick, но вы не можете щелкнуть его буквально)

Чтобы просмотреть все элементы в списке, сделайте список списком multiple и увеличьте его размер, например:

<select id = "countries" multiple = "multiple" size = "10">
<option value = "1">Country</option>
</select>

Вы можете легко имитировать щелчок по элементу, но щелчок по <select> не откроет раскрывающийся список.

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

Как было сказано, вы не можете программно открыть <select> с помощью JavaScript.

Однако вы можете написать свой собственный <select>, управляя всем внешним видом и ощущениями самостоятельно. Что-то вроде того, что вы видите для условий поиска с автозаполнением на Google или Yahoo! или в поле поиска местоположения на Сеть погоды.

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

Нет, не можешь.

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

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

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

$('#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/

Скриншоты

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

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

_{(source: googlecode.com)}

При эмуляции щелчка:

_{(source: googlecode.com)}

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

Простой легкий способ.

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");
}

Измените идентификатор на фиксированное значение, я не умно, но я надеюсь, что вы понимаете идею.

Я попытался использовать ответ 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();
}

Одна вещь, на которую это не отвечает, - это то, что происходит, когда вы нажимаете один из вариантов в списке выбора после того, как вы выполнили свой size = n и установили абсолютное позиционирование.

Поскольку событие размытия делает его size = 1 и меняет его обратно на то, как он выглядит, у вас также должно быть что-то вроде этого

$("option").click(function(){
    $(this).parent().blur();
});

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

z-index: 100;

или что-то в этом роде в стиле select.

Это основано на ответах чуть выше и использует длину / количество вариантов, чтобы соответствовать тому, сколько вариантов на самом деле есть.

Надеюсь, это поможет кому-то получить нужные результаты!

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

Супер просто:

var state = false;
$("a").click(function () {
    state = !state;
    $("select").prop("size", state ? $("option").length : 1);
});

Может быть, поздно, но вот как я решил это: 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');

                  }

Это должно покрыть это:

 var event;
 event = document.createEvent('MouseEvents');
 event.initMouseEvent('mousedown', true, true, window);
 countries.dispatchEvent(event); //we use countries as it's 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);
 });

я только что добавил

select = $('#' + id);
length = $('#' + id + ' > option').length;
if (length > 20)
    length = 20;
select.attr('size', length);
select.css('position', 'absolute');
select.focus();

и добавить в выбор

onchange = "$(this).removeAttr('size');"
onblur = "$(this).removeAttr('size');"

Сделать такой же внешний вид, как и классический (перекрывают остальную часть HTML)