Jak mogę zmniejszyć liczbę wyświetlanych opcji w rozwijanym menu HTML <select>?Jak mogę ograniczyć widoczne opcje w liście rozwijanej HTML <select>?
Na przykład:
<select>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="20">20</option>
</select>
Jak mogę uzyskać przeglądarka pokazać tylko pierwszych pięć opcji i przewiń w dół do reszty?
wielkość atrybutów sprawy, jeśli rozmiar = 5 następnie pierwsze 5 pozycji zostaną pokazane i dla innych trzeba przewinąć w dół ..
<select name="numbers" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
Jeśli użyjemy parametru size, nie wyświetli się on jako rozwijany, ale potrzebuję go jako rozwijanego – vinox
Można użyć atrybutu size aby <select> pojawiają się jako zamiast listy rozwijanej. Numer użyty w atrybucie size określa liczbę opcji widocznych w polu bez przewijania.
<select size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
Nie można zastosować to do <select>i które wciąż pojawiają się w postaci listy rozwijanej chociaż. Przeglądarka/system operacyjny zdecyduje, ile opcji ma być wyświetlanych dla list rozwijanych, chyba że używasz HTML, CSS i JavaScript, aby utworzyć fałszywą listę rozwijaną.
Użyj atrybutu size z <select>;
Nie można ograniczyć liczby widocznych elementów w liście rozwijanej wyboru (jeśli używa się jej jako listy rozwijanej, a nie jako listy).
Ale można użyć javascript/jQuery, aby zastąpić ten selectbox czymś innym, które wygląda jak rozwijane okno. Następnie możesz obsłużyć wysokość rozwijanej, jak chcesz.
jNice byłby wtyczką jQuery z takimi funkcjami. Ale istnieje również wiele alternatyw dla tego.
Można spróbować to
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
on pracował dla mnie
Powoduje to poprawne zmienianie rozmiaru, ale powoduje awarię IE 11 podczas wybierania wartości. Blur działa znaleźć. Chrome działa dobrze. Jakieś pomysły? –
Tnx @ Raj_89, Twój trik był bardzo dobry, może być lepiej, tylko przez użycie dodatkowego stylu, które czynią go na inny dom obiektów, dokładnie jak zwykły wybierz tag opcji w HTML ...
select{
position:absolute;
}
u widać wynikają tutaj: http://jsfiddle.net/aTzc2/
Rozwiązanie Raj_89 jest najbliższe ważnej opcji, chociaż wspomniane przez Kevina Swarta w komentarzu, że złamie IE, co dla dużej liczby klientów korporacyjnych jest problemem (i informowanie klienta, że nie będzie kodować do IE "ponieważ powody są mało prawdopodobne, aby twój szef był szczęśliwy;)).
Więc bawiłem się z nim i oto jest problem: zdarzenie "onmousedown" rzuca dopasowanie w IE, więc to, co chcemy zrobić, to zapobiec domyślnej sytuacji, gdy użytkownik kliknie menu po raz pierwszy.Ważne jest, aby to był tylko czas, w którym to robimy: jeśli zapobiegniemy obrażeniom podczas następnego kliknięcia, kiedy użytkownik wybierze, zdarzenie onchange nie zostanie uruchomione.
W ten sposób uzyskujemy ładną listę rozwijaną, brak migotania, brak zerwania IE - po prostu działa ... przynajmniej w IE10 i nowszych wersjach oraz najnowsze wersje wszystkich innych głównych przeglądarek.
<p>Which is the most annoing browser of them all:</p>
<select id="sel" size = "1">
<option></option>
<option>IE 9</option>
<option>IE 10</option>
<option>Edge</option>
<option>Firefox</option>
<option>Chrome</option>
<option>Opera</option>
</select>
Oto skrzypce: https://jsfiddle.net/88cxzhom/27/
kilka rzeczy zauważyć: 1) pozycjonowanie bezwzględne i ustawienie z-index jest pomocne, aby uniknąć przemieszczania innych elementów, gdy są wyświetlane opcje. 2) Użyj właściwości "currentTarget" - będzie to wybrany element we wszystkich przeglądarkach. Podczas gdy "cel" zostanie wybrany w IE, reszta faktycznie pozwoli ci pracować z opcją.
Mam nadzieję, że to komuś pomaga.
Użyłem tego kodu i zadziałało dla mnie w Chrome, Firefox i IE.
<select onmousedown="if(this.options.length>5){this.size=5;}" onchange="this.blur()" onblur="this.size=0;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
<option>option7</option>
</select>
Dziękujemy! Niestety, atrybut size nie jest tym, czego szukałem, ponieważ sprawia, że wszystkie opcje x są widoczne. Próbowałem uniknąć javascript dla tak małego, ale denerwującego problemu. Wydaje się jednak, że nie mam innego wyboru. – medowlock
tak. Osobiście nigdy nie widziałem tego problemu, ponieważ wszystkie "
Nigdy nie zrozumiem, jak twórcy przeglądarek budują WebComponents i co tam, i nie mogą wydawać się tak proste, jak to. każdy programista kiedykolwiek powiedział "hmm, chciałbym ograniczyć liczbę elementów widocznych na moim liście rozwijanym ... ta brzydka lista będzie dobrze!" – Petrov