Cascading DropDownList using dynamic IDs in ASP.NET C#

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?

Please edit your question and add the javascript or jQuery you've tried and explain exactly what you want to do and what you mean with _I tried to use Javascript and Jquery but I am failing at_ — Triby, Jul 14 '20 at 20:42
@gaetanoM that's is what I am trying to figure it out. I was thinking of hiding the cities that doesn't belong to the country but I don't know if is a good idea. — Rodrick, Jul 14 '20 at 21:55
I edited some code for simplification. I take out the filterCity(12345). — Rodrick, Jul 14 '20 at 23:06

score 1 · Accepted Answer · answered Jul 15 '20 at 13:59

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>

answered Jul 15 '20 at 13:59

gaetanoM

41,594
6
42
61

I tried something like that but I couldn't add a new attribute to the DropDownList. Is there a way to add it? – Rodrick Jul 15 '20 at 14:28
you need to do it server side while building the select object.....otherwise how can you distinguish one city from another? – gaetanoM Jul 15 '20 at 14:33
I tried DDL_city.Attributes.Add("data-country",countryID); but that will add the attribute to the select not to the option. How can I added to the option? – Rodrick Jul 15 '20 at 14:36
take a look to this [answer](https://stackoverflow.com/questions/11834920/how-to-add-a-data-attribute-to-a-dropdown-menu-with-c-sharp) – gaetanoM Jul 15 '20 at 14:39
I tried ddl.Items(row).Attributes.Add("data-country", someID); and Am getting Non-invocable member 'ListControl.Items' cannot be used like a method. What if I concat the country ID to the city value? How can I use it on your example? – Rodrick Jul 15 '20 at 15:45
1

I figure it out. THANKS – Rodrick Jul 15 '20 at 16:04
One last thing. On code behind I set the SelectedValue for each DropDownList but this value is changed after the page is completely load. How can I avoid this? – Rodrick Jul 15 '20 at 18:11
1

...remove **.trigger('change');** from my snippet – gaetanoM Jul 15 '20 at 18:33

Cascading DropDownList using dynamic IDs in ASP.NET C#

1 Answers1