Dla tej listy rozwijanej w HTML:

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

Chciałbym otworzyć listę (to samo, co kliknięcie lewym przyciskiem myszy). Czy jest to możliwe przy użyciu JavaScript (a dokładniej jQuery)?

Możesz łatwo zasymulować kliknięcie elementu , ale kliknięcie <select>nie spowoduje otwarcia menu.

Używanie wielokrotnych wyborów może być problematyczne. Być może powinieneś rozważyć przyciski opcji wewnątrz elementu kontenera, które możesz rozszerzać i zmniejszać w razie potrzeby.

Próbowałem znaleźć to samo i zawiodłem się. Skończyło się na zmianie rozmiaru atrybutu dla pola wyboru, aby wyglądało na otwarte

$('#countries').attr('size',6);

a kiedy skończysz

$('#countries').attr('size',1);

Natknąłem się na ten sam problem i mam rozwiązanie. Funkcja o nazwie ExpandSelect (), która emuluje kliknięcie myszą na elemencie „select”, robi to poprzez utworzenie innego <select>elementu, który jest absolutnie pozycjonowany i ma wiele opcji widocznych jednocześnie poprzez ustawienie sizeatrybutu. Przetestowane we wszystkich głównych przeglądarkach: Chrome, Opera, Firefox, Internet Explorer. Wyjaśnienie, jak to działa, wraz z kodem tutaj:

Edytuj (link został uszkodzony) .

Stworzyłem projekt w Google Code, przejdź do kodu tam:

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

Zrzuty ekranu

Istnieje niewielka różnica w graficznym interfejsie użytkownika podczas emulacji kliknięcia, ale to nie ma znaczenia, przekonaj się sam:

Po kliknięciu myszą:

_{(źródło: googlecode.com )}

Podczas emulacji kliknięcia:

_{(źródło: googlecode.com )}

Więcej zrzutów ekranu na stronie projektu, link powyżej.

Jest to oparte na odpowiedziach powyżej i wykorzystuje długość / liczbę opcji, aby dostosować się do liczby faktycznie dostępnych opcji.

Mam nadzieję, że pomoże to komuś uzyskać potrzebne wyniki!

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

Powinno to obejmować:

 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

Może to być powiązane na przykład ze zdarzeniem naciśnięcia klawisza, więc gdy element ma fokus, użytkownik może wpisać, a rozwinie się on automatycznie ...

--Kontekst--

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

Prosty, łatwy sposób.

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
}

Teraz możesz zadzwonić do DropDown w ten sposób

<select onfocus="down(this)" onblur="up(this)">

U mnie działa idealnie.

Może lepiej, bo nie masz problemów z pozycją pozostałych elementów na stronie.

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

Zmień identyfikator na stałą wartość mybe nie jest mądry, ale mam nadzieję, że widzisz ideę.

Nie jest możliwe, aby javascript "kliknął" na elemencie (możesz wywołać dołączone onclickzdarzenie, ale nie możesz go dosłownie kliknąć)

Aby wyświetlić wszystkie pozycje na liście, utwórz listę jako multiplelistę i zwiększ jej rozmiar, na przykład:

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

Nie, nie możesz.

Możesz zmienić rozmiar, aby był większy ... podobny do pomysłu Dreas, ale jest to rozmiar, który musisz zmienić.

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

Próbowałem użyć odpowiedzi mrperfect i miałem kilka błędów. Po kilku drobnych zmianach udało mi się to uruchomić. Po prostu zmieniłem to tak, żeby robił to tylko raz. Po wyjściu z listy rozwijanej nastąpi powrót do zwykłej metody rozwijania menu.

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

Jedyną rzeczą, na którą to nie odpowiada, jest to, co się stanie, gdy klikniesz jedną z opcji na liście wyboru po dokonaniu rozmiaru = n i ustawieniu pozycji absolutnej.

Ponieważ zdarzenie rozmycia sprawia, że ​​rozmiar = 1 i zmienia go z powrotem na wygląd, powinieneś również mieć coś takiego

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

Ponadto, jeśli masz problemy z bezwzględnie pozycjonowaną listą wyboru wyświetlaną za innymi elementami, po prostu umieść

z-index: 100;

lub coś takiego w stylu zaznaczenia.

Super proste:

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

Jak już wspomniano, nie można programowo otworzyć pliku <select>przy użyciu JavaScript.

Możesz jednak napisać własne <select>zarządzanie całym wyglądem i samopoczuciem. Coś jak to, co widzisz w autouzupełnianiu wyszukiwanych haseł w Google lub Yahoo! lub pole Wyszukaj lokalizację w The Weather Network .

Znalazłem jeden dla jQuery tutaj . Nie mam pojęcia, czy spełniłaby Twoje potrzeby, ale nawet jeśli nie do końca odpowiada Twoim potrzebom, powinna dać się zmodyfikować, aby otworzyła się w wyniku innej akcji lub zdarzenia. Ten faktycznie wygląda bardziej obiecująco.

właśnie dodałem

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

i dodaj do zaznaczenia

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

aby wyglądał tak samo jak klasyczny (nakładaj na resztę HTML)

Może późno, ale tak to rozwiązałem: 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');

                  }