使用jQuery根據國家和州填充州和城市下拉列表

Question

我正在嘗試使用JSON完成下拉列表。 我想要3個下拉菜單。 首先填寫國家/地區下拉菜單（例如：美國，英國等）。 現在，當用戶選擇USA時，需要使用jQuery .change（）填充下拉列表。 再次當用戶選擇狀態時，他們需要向城市下拉列表顯示。

我怎樣才能做到這一點？ 由於我的JSON文件有點大，我在這里添加了它並嘗試填充國家下拉列表但無法生成州和城市下拉...

http://jsfiddle.net/vCFv6/

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

上面的代碼可以幫助我填充國家，但不包括其他國家和城市。 任何幫助深表感謝。

提前致謝。

Answer 1

您需要級聯三個文本框的.change()事件，以便：

• 改變國家：
  • 清空州和城市的下降
  • 填充狀態下拉列表（異步）
• 改變狀態：
  • 清空城市下降
  • 填充城市下拉（異步）

下面是一個草圖大綱，顯示了如何鏈接事件處理程序。 下拉列表是異步填充的，因此在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"));
        }
    });
});

Answer 2

正如其他人所說，你必須處理國家和州選擇輸入的onchange事件並應用你的邏輯。 為了在選擇國家時動態獲取狀態，我在這里擺弄，你可能能夠自己編寫其余的代碼 - 小提琴

您可能還會看到此基於其他下拉值的填充下拉列表

Answer 3

您需要獲取“上一個”下拉列表的值，並過濾掉其他下拉列表。 基本上你有兩個選擇：

1. 擁有所有值的所有三個下拉列表。 然后過濾掉那些不需要的東西。
2. 在第一個中選擇一個值后，掛鈎change（）事件，使用所選值對某個后端進行ajax調用，並返回與該國家/地區對應的狀態和城市。

Answer 4

在您的代碼中，您必須在進行選擇時編寫所有處理程序，並且必須根據輸入參數查詢JSON對象並填充您的更多下拉列表，就像您創建了國家/地區一樣。 在這種情況下，您在JSON中擁有客戶端的所有數據。 通常這種數據都在數據庫中，因此您必須從服務器獲取。

您可以使用JQuery Autocomplete Widget制作它。

首次選擇您只啟用國家/地區自動填充功能。

在用戶進行選擇后，您可以在javascript中設置狀態源（將Country參數傳遞給方法，當用戶鍵入時，您可以根據country參數填充服務器中的值）。

當用戶進行了2.選擇后，您將啟用第三個自動完成，並設置輸入“狀態”參數，並根據城市自動完成中的值填充值。