Jaka jest najlepsza metoda dodawania opcji do <select>
obiektu JavaScript za pomocą jQuery?
Szukam czegoś, do czego nie potrzebuję wtyczki, ale chciałbym również zainteresować wtyczkami, które tam są.
Oto co zrobiłem:
selectValues = { "1": "test 1", "2": "test 2" };
for (key in selectValues) {
if (typeof (selectValues[key] == 'string') {
$('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
}
}
Czyste / proste rozwiązanie:
To jest oczyszczona i uproszczona wersja Matdumsa :
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
Zmiany w stosunku do matdumsa: (1) usunęła tag zamykający dla opcji wewnątrz append () i (2) przeniosła właściwości / atrybuty na mapę jako drugi parametr append ().
javascript
jquery
arrays
html-select
Darryl Hein
źródło
źródło
value
jest to ciąg (i zakodowany na stałe), który nie musi być cytowany.Odpowiedzi:
Tak samo jak inne odpowiedzi, w jQuery:
źródło
$("#mySelect")
do var, w przeciwnym razie wywoływanie za$("#mySelect")
każdym razem w pętli jest bardzo marnotrawstwem, podobnie jak aktualizowanie DOM. Zobacz punkty 3 i 6 w artzstudio.com/2009/04/jquery-performance-rules/…var mySelect = $("#mySelect") outside of the
każdą pętlę. Byłoby to znacznie bardziej wydajne. Zobacz odpowiedź Carla poniżejattr
itext
są w rzeczywistości metodami$('<option/>')
-obiektuW ten sposób „dotkniesz DOM” tylko raz.
Nie jestem pewien, czy najnowszą linię można przekonwertować na $ ('# mySelect'). Html (output.join ('')), ponieważ nie znam elementów wewnętrznych jQuery (być może parsuje się w html () metoda)źródło
key
ma jakieś cytaty lub>, <
w nim.Jest to nieco szybsze i czystsze.
źródło
jQuery
Waniliowy JavaScript
źródło
Option
obiekcie. Czy to jest wbudowane we wszystkie przeglądarki?new Option
, ale okazało się, że nie działa w IE6 i 7. Nie mam powodu, ale działało wiele pełnych opcji jQuery.new Option('display', value, true)
new Option('display', value, true, true)
( javascriptkit.com/jsref/select.shtml )Jeśli nie musisz obsługiwać starych wersji IE, skorzystanie z
Option
konstruktora jest zdecydowanie najlepszym rozwiązaniem, czytelne i wydajne rozwiązanie :Jego funkcjonalność jest równoważna, ale czystsza niż:
źródło
Wygląda to ładniej, zapewnia czytelność, ale jest wolniejsze niż inne metody.
Jeśli chcesz prędkości, najszybszym (przetestowanym!) Sposobem jest użycie tablicy, a nie konkatenacji łańcuchów i użycie tylko jednego wywołania append.
źródło
Udoskonalenie odpowiedzi starszego @ joshperry :
Wygląda na to, że zwykły .append działa również zgodnie z oczekiwaniami,
lub krócej
źródło
$.weakmap
aby zezwolić naGC
map()
konstrukcję, w połączeniu z właściwościąappend()
poprawnego dodania tablicy obiektów!Wszystkie te odpowiedzi wydają się niepotrzebnie skomplikowane. Wszystko czego potrzebujesz to:
To jest całkowicie kompatybilny z wieloma przeglądarkami.
źródło
new Option(value, key);
? Zamówienie parametr jest Opcje (text_visible_part, value_behind_the_scenes).Ostrzegam ... Używam jQuery Mobile 1.0b2 z PhoneGap 1.0.0 na telefonie z Androidem 2.2 (Cyanogen 7.0.1) (T-Mobile G2) i nie mogłem w ogóle uruchomić metody .append (). Musiałem użyć .html () w następujący sposób:
źródło
Zrobiłem kilka testów i to, jak sądzę, działa najszybciej. : P
źródło
Istnieje podejście oparte na Microsoft Templating które jest obecnie proponowane do włączenia do rdzenia jQuery. Korzystanie z szablonów ma większą moc, więc w najprostszym scenariuszu może nie być najlepszą opcją. Aby uzyskać więcej informacji, zobacz post Scott Gu opisujący funkcje.
Najpierw dołącz plik szablonu js, dostępny z github .
Następnie skonfiguruj szablon
Następnie z danymi wywołaj metodę .render ()
Mam blogu to podejście w sposób bardziej szczegółowy.
źródło
Zrobiłem coś takiego, ładując przedmiot rozwijany przez Ajax . Powyższa odpowiedź jest również do przyjęcia, ale zawsze dobrze jest mieć jak najmniej modyfikacji DOM, aby uzyskać lepszą wydajność.
Dlatego zamiast dodawać każdy element w pętli, lepiej jest zbierać elementy w pętli i dołączać je po zakończeniu.
Dołącz to,
a nawet lepiej
źródło
Prosty sposób to:
źródło
Większość innych odpowiedzi używa
each
funkcji do iteracji poselectValues
. Wymaga to, aby append był wywoływany dla każdego elementu, a przepływ jest uruchamiany, gdy każdy jest dodawany indywidualnie.Aktualizacja tej odpowiedzi do bardziej idiomatycznej metody funkcjonalnej (przy użyciu nowoczesnego JS) może być utworzona, aby wywoływać
append
tylko raz, z tablicąoption
elementów utworzonych za pomocą mapy iOption
konstruktora elementów.Użycie
Option
elementu DOM powinno zmniejszyć obciążenie wywołania funkcji, ponieważoption
element nie musi być aktualizowany po utworzeniu, a logika analizy jQuery nie musi działać.Można to jeszcze bardziej uprościć, jeśli utworzysz fabryczną funkcję narzędziową, która utworzy obiekt opcji:
Następnie można to przekazać bezpośrednio do
map
:Poprzednie sformułowanie
Ponieważ
append
pozwala również na przekazywanie wartości jako zmiennej liczby argumentów, możemy wstępnie przygotować listęoption
elementów map i dołączyć je jako argumenty w jednym wywołaniu za pomocąapply
.Wygląda na to, że w późniejszych wersjach jQuery
append
akceptuje również argument tablicowy, co można nieco uprościć:źródło
Działa dobrze z jQuery 1.4.1.
Aby zapoznać się z pełnym artykułem dotyczącym korzystania z list dynamicznych w programie ASP.NET MVC i jQuery, odwiedź:
Dynamiczne listy wyboru z MVC i jQuery
źródło
Występuje problem z sortowaniem tego rozwiązania w przeglądarce Chrome (jQuery 1.7.1) (Chrome sortuje właściwości obiektu według nazwy / numeru?) Aby zachować porządek (tak, obiekt nadużywa), zmieniłem to:
do tego
a następnie $ .each będzie wyglądać następująco:
źródło
Zamiast powtarzać wszędzie ten sam kod, sugerowałbym, że bardziej pożądane jest napisanie własnej funkcji jQuery, takiej jak:
Następnie, aby dodać opcję, wykonaj następujące czynności:
źródło
Możesz po prostu iterować tablicę json za pomocą następującego kodu
$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");
źródło
Chociaż wszystkie poprzednie odpowiedzi są poprawnymi odpowiedziami - może być wskazane dołączenie ich wszystkich do documentFragmnet, a następnie dołączenie tego fragmentu dokumentu jako elementu po ...
Zobacz przemyślenia Johna Resiga na ten temat ...
Coś w stylu:
źródło
$.each
jest wolniejszy niż afor
pętla$("#mySelect").append();
Więc najlepsze rozwiązanie jest następujące
Jeśli dane JSON
resp
toużyj go jako
źródło
Jeszcze inny sposób na zrobienie tego:
źródło
$('#mySelect')
zapisać w pamięci podręcznej, a następnie ponownie przeanalizowałeś odpowiedź @rocktheroad ... cokolwiek, to jest bardziej praktyczne rozwiązanieTo manipuluje DOM tylko raz po zbudowaniu gigantycznego ciągu.
źródło
$("#myselect").empty().append(opts);
zgetElementById('myselect').innerHtml = opts;
To, co zrobiłem z tablic dwuwymiarowych: Pierwsza kolumna to pozycja I, dodać do
innerHTML
z<option>
. Druga kolumna jest record_id i dodaj dovalue
z<option>
:PHP
JavaScript / Ajax
źródło
Wtyczkę jQuery można znaleźć tutaj: Automatyczne wypełnianie wybranych pól za pomocą jQuery i AJAX .
źródło
Odkryłem, że jest to proste i działa świetnie.
źródło
Format JSON:
I kod jQuery wypełniający wartości do rozwijanego menu po sukcesie Ajax:
źródło
Korzystając z funkcji $ .map (), możesz to zrobić w bardziej elegancki sposób:
źródło
źródło
Ustaw swój identyfikator wyboru HTML w poniższej linii. Tutaj
mySelect
jest używany jako identyfikator elementu select.następnie pobierz obiekt, który jest selectValues w tym scenariuszu i ustawia go na jquery dla każdej pętli. Użyje odpowiednio wartości i tekstu obiektów i dołącza je do wyboru opcji w następujący sposób.
Spowoduje to wyświetlenie tekstu jako listy opcji po wybraniu listy rozwijanej i po wybraniu tekstu zostanie użyta wartość wybranego tekstu.
Na przykład.
„1”: „test 1”, „2”: „test 2”,
Upuścić,
wyświetlana nazwa: test 1 -> wartość wynosi 1 wyświetlana nazwa: test 2 -> wartość wynosi 2
źródło
W rzeczywistości, aby uzyskać lepszą wydajność, lepiej jest zrobić listę opcji osobno i dołączyć, aby wybrać id.
http://learn.jquery.com/performance/append-outside-loop/
źródło