在 ASP.NET C# 中使用動態 ID 級聯 DropDownList

Question

我正在嘗試級聯使用此代碼動態創建的國家和城市 DropDownList。 所以每個 select 都會有一個不同的 ID，比如“country_1234”和“city_1234”。 我不知道我是否可以從后面的代碼中做到這一點，或者我可以在 Javascript 上做到這一點。 我知道如何讓它適用於一個國家 ID 和一個城市 ID，但我現在不知道如何讓它適用於動態 ID。 我添加了一個jsfiddle。

TableRow row;
TableCell cell;

for (int i = 0; i < dt4.Rows.Count; i++)
{
    string sql_rc = "";
    sql_rc = "SELECT ";
    sql_rc += "rg_country.id_country, ";
    sql_rc += "CONCAT(rg_country.numero_country, ' - ', rg_country.country_name) AS country ";
    sql_rc += "FROM ";
    sql_rc += "rg_country ";
    sql_rc += "ORDER BY ";
    sql_rc += "rg_country.id_country ";

    DataTable dt_rc = new DataTable();
    dt_rc = conexion.MySelect(sql_rc);

    DropDownList DDL_country = new DropDownList();
    DDL_country.ID = "country_" + personID;
    DDL_country.Width = Unit.Pixel(75);

    if (dt_rc.Rows.Count > 0)
    {
        DDL_country.DataSource = dt_rc;
        DDL_country.DataTextField = ("country");
        DDL_country.DataValueField = ("id_country");
        DDL_country.DataBind();
    }

    cell.Controls.Add(DDL_country);
    
    string sql_cc = "";
    sql_cc = "SELECT ";
    sql_cc += "rg_city.id_city, ";
    sql_cc += "rg_city.city_name, ";
    sql_cc += "rg_city.id_country ";
    sql_cc += "FROM ";
    sql_cc += "rg_country ";
    sql_cc += "INNER JOIN rg_city ON (rg_country.id_country = rg_city.id_country) ";
    sql_cc += "WHERE ";
    sql_cc += "rg_city.active_city = 1 ";
    sql_cc += "ORDER BY ";
    sql_cc += "rg_city.city_name ";

    DataTable dt_cc = new DataTable();
    dt_cc = conexion.MySelect(sql_cc);

    DropDownList DDL_city = new DropDownList();
    DDL_city.ID = "city_" + personID;
    DDL_city.Width = Unit.Pixel(75);

    if (dt_cc.Rows.Count > 0)
    {
        DDL_city.DataSource = dt_cc;
        DDL_city.DataTextField = ("city_name");
        DDL_city.DataValueField = ("id_city");
        DDL_city.DataBind();
    }

    cell.Controls.Add(DDL_city);
}

我的 HTML 看起來像這樣：

<select name="country_12345" id="country_12345">
    <option value="1">Country One</option>
    <option value="2">Country Two</option>
    <option value="3">Country Three</option>
</select>

<select name="city_12345" id="city_12345">
    <option value="101">City One Country One</option>
    <option value="102">City Two Country One</option>
    <option value="103">City One Country Two</option>
    <option value="104">City Two Country Two</option>
    <option value="105">City One Country Three</option>
    <option value="106">City Two Country Three</option>
</select>

編輯：為了簡化，我編輯了一些代碼。

編輯2：我添加了這個小提琴：

https://jsfiddle.net/z3bLnuwe/

該示例適用於特定 ID（country_12345 和 city_12345）。 ¿我怎樣才能使它適用於多個動態 ID？

Answer 1

您的問題可能有很多不同的解決方案。 總而言之，我可能建議將更改事件處理程序附加到您的國家/地區 select 框以顯示/隱藏城市選項。

為了實現這一點，我建議為每個選項添加一個新的數據屬性，以便將每個選項鏈接到相應的國家/地區。

片段：

 $('[id^=country_]').on('change', function(e) { var cityId = 'city_' + this.id.split('_').pop(); var cityVal = this.value; var fToBeSelected = $('#' + cityId + ' option').hide().filter(function() { return this.dataset.country == cityVal; }).show().first().val(); $('#' + cityId).val(fToBeSelected); }).trigger('change');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="country_12345" id="country_12345"> <option value="1">Country One</option> <option value="2">Country Two</option> <option value="3">Country Three</option> </select> <select name="city_12345" id="city_12345"> <option value="101" data-country="1">City One Country One</option> <option value="102" data-country="1">City Two Country One</option> <option value="103" data-country="2">City One Country Two</option> <option value="104" data-country="2">City Two Country Two</option> <option value="105" data-country="3">City One Country Three</option> <option value="106" data-country="3">City Two Country Three</option> </select>