Wypełnianie list rozwijanych stanu i miasta na podstawie kraju i stanu przy użyciu jQuery

Question

Próbuję wykonać rozwijanie przy użyciu JSON. Chcę 3 dropdowns. Najpierw zapełnij listę krajów (np. Usa, uk itd.). Teraz, gdy użytkownik wybierze USA, wówczas listy rozwijane muszą zostać wypełnione za pomocą jQuery .change(). Ponownie, gdy użytkownik wybierze stan, który ma być pokazany z rozwijanymi miastami.

Jak mogę to osiągnąć? Jak mój plik JSON jest nieco duży dodałem go tutaj i starał się wypełnić kraje rozwijanej ale w stanie wygenerować stany i miasta spaść ...

http://jsfiddle.net/vCFv6/

$.each(myJson.country, function (index, value) { 
$("#country").append('<option value="'+value.id+'">'+value.name+'</option>');}); 

Powyższy kod pomaga mi zapełnić tylko krajów, ale nie takich jak państwa i miasta. Każda pomoc jest doceniana.

Z góry dziękuję.

Answer 1

Dokładnie jak mówili inni, trzeba obsłużyć zdarzenia onchange kraju & państwowych wybranych wejść & zastosować logikę. Mam bawił tutaj coraz stany dynamicznie na wybranie kraju, może być w stanie kodować resztę siebie - Fiddle

Można też zobaczyć ten Populating Dropdown Based On Other Dropdown Value

Answer 2

Musisz uzyskać wartość "poprzedniego" menu i odfiltrować pozostałe. Zasadniczo masz dwie opcje:

1. Masz wszystkie trzy listy z wszystkimi wartościami. Następnie odfiltruj te, które nie są potrzebne.
2. Po wybraniu wartości w pierwszej, przechwyć zdarzenie change(), wywołaj ajax do jakiegoś backendu z wybraną wartością i zwróć stany i miasta odpowiadające temu krajowi.

Answer 3

W swoim kodzie musisz napisać wszystkie procedury obsługi po dokonaniu selekcji i musieć wyszukiwać obiekty JSON zgodnie z parametrem wejściowym i wypełniać kolejne listy rozwijane, tak jak kraj. W takim przypadku masz wszystkie dane po stronie klienta w JSON. Zazwyczaj tego rodzaju dane znajdują się w bazie danych, więc trzeba uzyskać z serwera.

Można to zrobić za pomocą JQuery Autocomplete Widget.

Pierwszy wybór polega na włączeniu autouzupełniania kraju.

Po dokonaniu wyboru użytkownik ustawia źródło stanu w javascript (należy podać parametr Country metody, a gdy użytkownik pisze, wypełnia wartość z serwera zgodnie z parametrem country).

Po dokonaniu wyboru przez użytkownika 2. włączasz funkcję autouzupełniania i ustawiasz wejściowy parametr "stan" i zapełniasz wartości zgodnie z autouzupełnianiem miasta.

Answer 4

Trzeba kaskady .change() wydarzenia z trzech pól tekstowych, takich, że: kraj

• Zmiana:
  • opróżnia stan i miasto rozwijanej
  • zapełnia rozwijaną państwa (asynchronicznie)
• Zmiana stanu:
  • Usuwa listę rozwijaną miasta
  • zapełnić miasto rozwijanej (asynchronicznie)

Poniżej przedstawiamy zarys projektu, który pokazuje, jak łańcuch obsługi zdarzeń. Listy rozwijane są zapełniane asynchronicznie, więc listy zależne są opróżniane przed żądaniem AJAX.

$("#country").change(function() { 
    $("#state, #city").find("option:gt(0)").remove(); 
    $("#state").find("option:first").text("Loading..."); 
    $.getJSON("/get/states", { 
     country_id: $(this).val() 
    }, function (json) { 
     $("#state").find("option:first").text(""); 
     for (var i = 0; i < json.length; i++) { 
      $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#state")); 
     } 
    }); 
}); 
$("#state").change(function() { 
    $("#city").find("option:gt(0)").remove(); 
    $("#city").find("option:first").text("Loading..."); 
    $.getJSON("/get/cities", { 
     state_id: $(this).val() 
    }, function (json) { 
     $("#city").find("option:first").text(""); 
     for (var i = 0; i < json.length; i++) { 
      $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#city")); 
     } 
    }); 
});