2013-07-30 10 views
8

Używam bootstrap 2.3.2 i chcę zaimplementować element, aby wyglądał jak rozwijane menu. Istnieje rozwiązanie w github: https://github.com/silviomoreto/bootstrap-selectBootstrap-select nie działa

Mój kod:

<select class="selectpicker"> 
    <option>1</option> 
    <option>2</option> 
</select> 

<script type="text/javascript"> 
    $(function() { 
     $('.selectpicker').selectpicker(); 
    }) 
</script> 

To nie działa. Ale kiedy wpisuję

$('.selectpicker').selectpicker(); 

w konsoli w Chrome DevTools - wybierz zmiany na liście rozwijanej i to działa.

+0

otrzymuję żadnych błędów.? –

+0

Może to nie działa, ponieważ próbujesz uruchomić selectpicker() przed załadowaniem wtyczki selectpicker. Gdzie jesteś w tym bootstrap-elect.js? –

+0

Nie pokazał się żaden błąd. Wykonuję selekcję, kiedy dokument jest gotowy, a także ten skrypt znajduje się na dole strony (po wybraniu opcji bootstrap-select) –

Odpowiedz

1
$(document).ready(function(){ 
    $('.selectpicker').selectpicker({ 
     style: 'btn-info', 
     size: 4 
    }); 
}); 

powinny działać prawidłowo

12

Trzeba wywołać funkcję inicjalizacji po DOM jest gotowy. Zwykle odbywa się to jako część bloku funkcyjnego $(document).ready().

$(document).ready(function() { 
    $('.selectpicker').selectpicker(); 
}); 

Przy próbie polecenia za pośrednictwem konsoli DOM jest już załadowany i dostępny. Jako takie połączenie działa. Powyższy przykład kodu powinien działać podobnie.

+5

'$ (function() {' jest równe '$ (document) .ready (function() {' –

+1

jeśli ustawię interwał na 3 sekundy przed uruchomieniem metody selectpicker - to działa.Trzeba tylko uruchomić tę metodę po pełnym kątowym bootstrapie. –

+0

Jest prawdopodobne, że funkcja jest wywoływana przed dołączeniem jquery/boostrap. Upewnij się, że są one dostępne przed uruchomieniem tego. Sprawdź także konsolę pod kątem komunikatu o błędzie wygenerowanego podczas wykonywania powyższego kodu. – Kami

1

Przed włożeniem kodu upewnij się, że bootstrap-select.js lub bootstrap-select.min.js jest dołączony.

<script src="path-to/js/bootstrap-select.min.js"></script> 
+0

To był problem na moim końcu –

0
$(document).ready(function() { 
    $('.selectpicker').selectpicker({ 
     style: 'btn-default', 
     size: false 
    }); 
}); 

mieć taki sam problem, to (zestaw domyślny rozmiar) pomógł mi. Bez ustawień menu nie wyświetla się.

The size option is set to 'auto' by default. When size is set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off. Set size to false to always show all items. The size of the menu can also be specifed using the data-size attribute.http://silviomoreto.github.io/bootstrap-select/

Dodano: także nie zapomnieć o wersji bootsrap, mogę szukać wokół i okazało się, że ten plugin działa z wersją 2.3.2 bootstrap na oficjalnej stronie ma taki związek. Więc myślę, że mogę też być kłopotem.

10

Po 1 roku miałem ten sam problem. Ten pracował dla mnie:

1-Pobrane pliki zip na stronie właściciela - http://silviomoreto.github.io/bootstrap-select/

2-CSS, w głowie tag-> 2files

pliki
<link rel="stylesheet" type="text/css" href="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/css/bootstrap-select.css"> 
<link href="yourPath/bootstrap.min.css" rel="stylesheet"> 

3-JS na koniec przed zamknij tag ciała.

<body> 
<select class="selectpicker"> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 
    </select> 

<script type="text/javascript" src="yourPath/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="yourPath/bootstrap.min.js"></script> 
<script type="text/javascript" src="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/js/bootstrap-select.js"></script> 

<script> 
    $(document).ready(function() { 
    $('.selectpicker').selectpicker(); 
    }); 
</script> 
</body> 
-5

ten pracował dla mnie, jeśli usunę ten

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

Soo dziwne ...