3

地域（アジア、東南アジア、北アメリカなど）と国を同じドロップダウンリストにまとめてドロップダウンリストを作成する必要があります。オプションを選択すると、選択した国に基づいて都市にデータが入力されます。

これは次のようになりますが、展開するのではなく、ドロップダウンリストに表示されます。私の場合、シンガポール、オーストラリア、カンボジアなどを地域として、都市を国として示しています。 ここに画像の説明を入力してください

または、より具体的には、次のように、台湾、中国本土を地域、都市を国として使用します。

ここに画像の説明を入力してください

すべてのデータはデータベースから取得され、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を追加することができましたが、問題は、関数を追加したにもかかわらず、行の最後に自動的に追加されると思うことif elseです。

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>"); }


        }
    }
});

}

代わりにこのようになります

ここに画像の説明を入力してください

アジアがどのように繰り返されたかに注目してください。

4

1 に答える 1

0

selectのoptgroup機能を使うべきだと思います。あなたが使用している技術（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を再利用します。

于 2013-01-14T10:36:31.197 に答える