Могу ли я открыть выпадающий список с помощью jQuery

Question

Для этого выпадающего списка в HTML:

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

Я хотел бы открыть список (так же, как щелкнуть по нему левой кнопкой мыши). Возможно ли это с помощью JavaScript (или, более конкретно, jQuery)?

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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)

Answer 4

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

                  }