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

Question

I am trying to cascade the country and the city DropDownList that are dynamically created with this code. So every select will have a different ID like "country_1234" and "city_1234". I don't know if I can do it from code behind or I could do it on Javascript. I know how can I make it work for one country ID and one city ID but I don't now how to make it work for dynamic IDs. I added a 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);
}

My HTML looks like this:

<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: I edited some code for simplification.

EDIT 2: I added this fiddle:

https://jsfiddle.net/z3bLnuwe/

The example is working for a specific ID (country_12345 and city_12345). ¿How can I make this work for multiples dynamic IDs?

Answer 1

There may be a lot of different solutions for your issue. All in all, I may suggest to attach a change event handler to your country select box in order to show/hide the city options.

In order to achieve that I suggest to add a new data attribute for each option in order to link each option to the corresponding country.

The snippet:

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