使用jQuery填充基於國家和州的州和城市下拉菜單

我正在嘗試使用JSON完成下拉菜單。我想要3個下拉菜單。首先填充國家下拉菜單（例如：美國，英國等）。現在，當用戶選擇美國，然後指出下拉需要使用jQuery .change（）填充。再次，當用戶選擇狀態時，他們需要顯示城市下拉菜單。使用jQuery填充基於國家和州的州和城市下拉菜單

我該如何做到這一點？由於我的JSON文件稍大我已經在這裏添加它，並試圖填充下拉列表中的國家，但無法產生的州和城市下拉...

http://jsfiddle.net/vCFv6/

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

上面的代碼幫我填充只是國家而不是其他國家和城市。任何幫助深表感謝。

在此先感謝。

來源

2013-07-01 SpiritOfDragon

怎麼又來了，你是在選擇的選擇移除第二選項」國家「 –

酷似別人說，你必須處理onchange事件的國家&狀態選擇輸入&運用你的邏輯。我在這裏騙得越來越狀態動態地選擇一個國家，你也許能夠剩下自己代碼 - Fiddle

你也可以看到這個 Populating Dropdown Based On Other Dropdown Value

來源

2013-07-01 12:12:48 face

我用我自己的邏輯，完成了工作。這是我第一次和JSON一起研究這個概念並解決了我的問題。您的代碼有助於理解如何在數組中獲取數組名稱。而不是使用for循環，我使用.each（）來做同樣的事情。謝謝。 – SpiritOfDragon

很高興能幫到你:) – face

你的小提琴幫助我理解了這個過程，謝謝。 – Eagle

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

有三個下拉列表中的所有值。然後過濾那些不需要的。
在第一個值中選擇一個值後，掛鉤change（）事件，使用所選值對某個後端進行ajax調用，並返回與該國家對應的州和城市。

來源

2013-07-01 11:52:03 Eric

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

您可以使用JQuery Autocomplete Widget。

首先選擇您只啓用國家自動填充。

用戶做出選擇後，您在javascript中設置狀態源（將Country參數傳遞給方法，並且當用戶輸入時，根據country參數填充服務器的值）。

當用戶進行了2.選擇後，您將啓用第三次自動填充，並設置輸入「狀態」參數並根據城市自動填充中的值填充值。

來源

2013-07-01 11:57:05 speti43

你需要級聯的三個文本框，使得.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")); 
     } 
    }); 
});

來源

2013-07-01 12:05:30

使用jQuery填充基於國家和州的州和城市下拉菜單

回答

相關問題