在 ASP.NET C# 中使用动态 ID 级联 DropDownList

Question

我正在尝试级联使用此代码动态创建的国家和城市 DropDownList。所以每个选择都会有一个不同的 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

您的问题可能有很多不同的解决方案。总而言之，我可能会建议将更改事件处理程序附加到您的国家/地区选择框以显示/隐藏城市选项。

为了实现这一点，我建议为每个选项添加一个新的数据属性，以便将每个选项链接到相应的国家/地区。

sn-p：

$('[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>