Obecnie walczę z listami rozwijanymi i chciałbym podzielić się swoimi doświadczeniami:
Istnieją szczególne sytuacje, w których <select>
nie można ich użyć i należy je „emulować” za pomocą menu rozwijanego.
Na przykład, jeśli chcesz utworzyć grupy wejściowe ładowania początkowego, takie jak Przyciski z listami rozwijanymi (patrz http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Niestety <select>
nie jest obsługiwany w grupach wejściowych, nie będzie poprawnie renderowany.
Czy ktoś już to rozwiązał? Byłbym bardzo zainteresowany rozwiązaniem.
I aby uczynić to jeszcze bardziej skomplikowanym, nie możesz użyć tak po prostu, $(this).text()
aby złapać tego, który użytkownik wybrał w menu rozwijanym, jeśli używasz glypiconów lub czcionek niesamowite ikony jako zawartość do rozwijania. Na przykład:
<li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li>
Ponieważ w tym przypadku nie ma tekstu, a jeśli go dodasz, zostanie on również wyświetlony w rozwijanym elemencie i jest to niepożądane.
Znalazłem dwa możliwe rozwiązania:
1) Użyj, $(this).html()
aby uzyskać zawartość wybranego <li>
elementu, a następnie ją zbadać, ale dostaniesz coś takiego, <a href="#0"><i class="fa fa-minus"></i></a>
więc musisz się tym pobawić, aby wyodrębnić to, czego potrzebujesz.
2) Wykorzystanie $(this).text()
i ukryć tekst w elemencie w ukrytym rozpiętości:
<li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>
. Dla mnie jest to proste i eleganckie rozwiązanie, możesz umieścić dowolny potrzebny tekst, tekst zostanie ukryty i nie musisz wykonywać żadnych transformacji $(this).html()
wyniku, jak w opcji 1), aby uzyskać to, czego potrzebujesz.
Mam nadzieję, że to jasne i może komuś pomóc :-)