드롭 다운 목록의 국가/지역 및 도시 목록

Question

지역 (아시아, 동남 아시아, 북미, .. 등) 및 국가를 같은 드롭 다운 목록에 함께 드롭 다운 목록을 만들어야합니다. 옵션을 선택하면 선택한 국가를 기반으로 시가 입력됩니다.

다음과 같이 표시되지만 확장하지 않고 드롭 다운 목록에 표시됩니다. 내 경우에는 싱가포르, 오스트레일리아, 캄보디아 등으로, 국가는 도시로 표시됩니다.

또는 더 구체적으로, 제 경우 : 대한 나라로 대만, 중국 본토 지역으로하고, 도시와 다음과 같이

내 모든 데이터

가 내 데이터베이스에서 가져온되어, 내 RegionTable와 같은이

내 CountryTable처럼 보이는 :

,

내가 선택한 국가에 따라 도시를 채우는 제대로 작동 코드를 가지고, 문제는 이제 국가와 같은 드롭 다운에이 지역을 넣어하는 방법을 모른다는 것이다. 유일한 문제는 사용자가 Region 대신 Country를 선택해야하기 때문에 Region에 추가하고 선택하지 못하게하는 것입니다.

임 드롭 다운리스트에 지역을 추가하는 방법에 나를 도울 수 내 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

select의 optgroup 기능을 사용해야한다고 생각합니다.당신은 당신이 (웹폼, 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입니다.