2013-07-26 11 views
5

Mam pole wyboru, które pokazuje około 7 opcji. Jak mogę uczynić select2 pokazać więcej opcji?select2: określ, ile opcji ma być wyświetlanych

<td class="span4"><select id="tec" class="span4"><option></option> 
    <option>A1</option><option>A2</option><option>C1</option> 
    <option>C2</option><option>C3</option><option>E1</option> 
    <option>E2</option><option>G1</option><option>G2</option> 
    </select> 
</td> 

Chodzi o pokazywanie więcej możliwości wyboru, a nie o wyborze

+0

Najpierw zamknij wybrany znacznik ... –

+0

[''] (http://jsfiddle.net/hxfBZ/3/) z 'ctrl + kliknięcie' –

Odpowiedz

3

To działało:

html:

<select class="bigdrop"> 

jquery:

$(".bigdrop .select2-results").css("max-height","400px"); 
+0

Z nową select2 - wersja 4, 'max-height' jest ustawiona na wewnętrzny element z klasą' .select2-results__options', więc powinna zostać zastąpiona. –

+0

PS: Patrząc na plik CSS z wtyczką select2, innym podejściem może być selektor css: '.select2-container - bootstrap .select2-results> .select2-results__options' {max-height: 400px; } –

0

spróbuj dodać liczne i atrybut size

<td class="span4"> 
    <select id="tec" class="span4" size="10" multiple="multiple"> 
     <option></option> 
     <option>A1</option><option>A2</option><option>C1</option> 
     <option>C2</option><option>C3</option><option>E1</option> 
     <option>E2</option><option>G1</option><option>G2</option> 
    </select> 
</td> 
+0

' size' nie wpłynęło na __select2__. –

0

nie sądzę, że będzie to dobry pomysł, aby ustawić rozmiar wybierz pole dynamicznie. Może sprawić, że cały twój projekt będzie wyglądał źle. Jeśli nie masz pewności co do liczby opcji, które chcesz pokazać w swoim wyborze, zasugeruję, abyś użył rozwijanego pola. Ale jeśli masz pewność co do tego, co chcesz zrobić, odpowiedź udzielona przez Tomas ostatnio może być dobrze. Wszystkiego najlepszego :-)

3

Jeśli szukasz po prostu wyświetlić więcej opcji niż domyślne bez niego wyglądając źle, właśnie napisałem wtyczkę jQuery (maximize-select2-height), aby zrobić dokładnie to. Zobacz zrzuty ekranu na stronie GitHub (połączone), aby zobaczyć, jak zachowuje się w różnych okolicznościach układu strony.

Mam nadzieję, że komuś to pomoże!

Powiązane problemy