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)?
jquery
html
drop-down-menu
Jon Tackabury
źródło
źródło
Odpowiedzi:
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.
źródło
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);
źródło
size
atrybutu do listy rozwijanej faktycznie konwertuje listę rozwijaną na Listbox, a zatem rozszerza się ..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 ustawieniesize
atrybutu. 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.
źródło
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(); }
źródło
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); });
źródło
$('#select_element').get(0).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ę.
źródło
Nie jest możliwe, aby javascript "kliknął" na elemencie (możesz wywołać dołączone
onclick
zdarzenie, ale nie możesz go dosłownie kliknąć)Aby wyświetlić wszystkie pozycje na liście, utwórz listę jako
multiple
listę i zwiększ jej rozmiar, na przykład:<select id="countries" multiple="multiple" size="10"> <option value="1">Country</option> </select>
źródło
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>
źródło
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(); }
źródło
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.
źródło
Super proste:
var state = false; $("a").click(function () { state = !state; $("select").prop("size", state ? $("option").length : 1); });
źródło
scrollIntoView
sprawie<select>
.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.
źródło
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)
źródło
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'); }
źródło