Каскадирование DropDownList с использованием динамических c идентификаторов в ASP. NET C#

Question

Я пытаюсь каскадировать DropDownList страны и города, которые динамически создаются с помощью этого кода. Таким образом, у каждого выбора будет другой идентификатор, например «country_1234» и «city_1234». Я не знаю, смогу ли я сделать это из кода позади или могу сделать это на Javascript. Я знаю, как заставить его работать для одного идентификатора страны и одного идентификатора города, но сейчас я не знаю, как заставить его работать для идентификаторов Dynami c. Я добавил 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>

EDIT: я отредактировал код для упрощения.

EDIT 2: I добавил эту скрипку:

https://jsfiddle.net/z3bLnuwe/

Пример работает для указанного c ID (country_12345 и city_12345). ¿Как сделать так, чтобы это работало для кратных динамических c ID?

Answer 1

Для вашей проблемы может быть много разных решений. В общем, я могу предложить прикрепить обработчик событий изменения к полю выбора вашей страны, чтобы показать / скрыть параметры города.

Для этого я предлагаю добавить новый атрибут данных для каждого параметра для привязки каждого варианта к соответствующей стране.

Фрагмент:

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