下拉列表中的國家/地區和城市列表

Question

我需要在同一個下拉列表中創建與該地區（亞洲，東南亞，北美等..）和國家一起的下拉列表。 選擇選項後，我將根據選擇的國家/地區填充城市。

它看起來像這樣，但在一個下拉列表中，而不是將其展開。 以我國的新加坡，澳大利亞，柬埔寨等地區爲例，以及所示的城市爲國家。

或者更具體地說，像下面，臺灣，中國大陸的地區，而城市作爲國家對我的情況：

我所有的數據都從我的數據庫中抽取的，我RegionTable看起來像這樣

和我CountryTable這樣的：

我已經得到了代碼基礎上選定的國家填充城市工作正常，現在的問題是，我不知道如何把區域與國家相同的下拉菜單。唯一的問題是我如何在區域中添加並使其無法選擇，因爲用戶應該選擇國家而不是區域。使用下面的代碼

林讓我CountryDropDownList

function loadPackage_CountryList() { 
$('#Package_Country option').each(function (i, option) { $(option).remove(); }); 
$('#Package_Country').attr('disabled', true); 
$("#Package_Country").append("<option value=''>Downloading...</option>"); 
$.ajax({ 
    type: "POST", url: PackageWSURL + "/GetPackageCountryList", data: "", 
    contentType: "application/json; charset=utf-8", dataType: "json", 
    success: function (response) { 
     var countries = response.d; 
     $('#Package_Country option').each(function (i, option) { $(option).remove(); }); 
     $('#Package_Country').attr('disabled', false); 
     for (var i = 0; i < countries.length; i++) { 
      $("#Package_Country").append("<option value='" + countries[i].Value + "'>" + countries[i].Display + "</option>"); 
     } 
    } 
}); 

}

任何人都可以幫我如何地區加入到下拉列表？ 在此先感謝。

--------------編輯----------------------

這是我的WebMethod從我的數據庫中獲取數據。

[WebMethod] 
public List<jsonItem> GetPackageCountryList() 
{ 
    List<jsonItem> RecordList = new List<jsonItem>(); 

    jsonItem jItemA = new jsonItem(); 
    jItemA.Display = "All Countries"; 
    jItemA.Value = "ALL"; 
    jItemA.Group = "---"; 
    RecordList.Add(jItemA); 

    String ConnStr = WebConfigurationManager.ConnectionStrings["TOUR_DB_ConStr"].ConnectionString; 
    SqlConnection connection = new SqlConnection(ConnStr); 
    connection.Open(); 

    try 
    { 
     String SQL = "SELECT [CountryList].[CountryCode], [CountryList].[CountryName], [CountryList].[Regioncode] "; 
     SQL += "FROM [CountryTable] "; 
     SQL += "WHERE [CountryTable].[Activation] = 1 "; 
     SQL += "ORDER BY [CountryTable].[Regioncode], [CountryTable].[CountryName]"; 
     SqlCommand command = new SqlCommand(SQL, connection); 
     SqlDataReader dataReader = command.ExecuteReader(); 
     while (dataReader.Read()) 
     { 
      jsonItem RecordItem = new jsonItem(); 

      RecordItem.Display = dataReader["CountryName"].ToString() + " - " + dataReader["CountryCode"].ToString(); 
      RecordItem.Value = dataReader["CountryCode"].ToString(); 
      RecordItem.Group = getRegionName(dataReader["RegionCode"].ToString()); 
      RecordList.Add(RecordItem); 
     } 
     dataReader.Close(); 
    } 
    catch { } 
    finally 
    { 
     connection.Close(); 
    } 

    return RecordList; 
} 

我已經成功地從下面的功能OPTGROUP增加，但現在的問題是，我認爲它會自動在<optgroup>在該行的末尾，即使我在已經添加添加ifelse功能。

function loadPackage_CountryList() { 
$('#Package_Country option').each(function (i, option) { $(option).remove(); }); 
$('#Package_Country').attr('disabled', true); 
$("#Package_Country").append("<option value=''>Downloading...</option>"); 
$.ajax({ 
    type: "POST", url: PackageWSURL + "/GetPackageCountryList", data: "", 
    contentType: "application/json; charset=utf-8", dataType: "json", 
    success: function (response) { 
     var countries = response.d; 
     var group = ""; 
     $('#Package_Country option').each(function (i, option) { $(option).remove(); }); 
     $('#Package_Country').attr('disabled', false); 
     for (var i = 0; i < countries.length; i++) { 
      group = countries[i].Group; 
      if (group != "---") { 
       $("#Package_Country").append("<optgroup label='" + countries[i].Group + "'><option value='" + countries[i].Value + "'>" + countries[i].Display + "</option>"); 
       if (group != countries[i].Group) 
       { $("#Package_Country").append("</optgroup>"); } 
       else { continue; } 

      } 
      else { $("#Package_Country").append("<option value='" + countries[i].Value + "'>" + countries[i].Display + "</option>"); } 


     } 
    } 
}); 

}

所以現在看起來是這樣的，而不是

通知亞洲是怎麼重複。

Answer 1

我想你應該使用optgroup select的特性。如果你可以點你使用（的WebForms，MVC）的技術，我可以進一步幫助

編輯

我會用這個代碼

var selectCountries = $("select#Package_Country"); 
for (var i = 0; i < countries.length; i++) { 
    group = countries[i].Group; 
    var optgroupRegion = null; 
    if (group !== "---") { 
     optgroupRegion = selectCountries.find("optgroup[label='" + group + "']"); 
     if (optgroupRegion.length === 0) { 
      optgroupRegion = $("<optgroup></optgroup>").attr("label", group).appendTo(selectCountries); 
     } 
    } 

    $("<option></option>").val(countries[i].Value).text(countries[i].Display).appendTo(optgroupRegion !==  null ? optgroupRegion : selectCountries); 
} 

更新的代碼將重用更改爲一個已經添加的optgroup。