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
– Triby, Commented Jul 14, 2020 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
– Rodrick, Commented Jul 14, 2020 at 21:55
I edited some code for simplification. I take out the filterCity(12345). — Rodrick
– Rodrick, Commented Jul 14, 2020 at 23:06

gaetanoM · Accepted Answer · 2020-07-15 13:59:42Z

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, 2020 at 13:59

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Rodrick Over a year ago

I tried something like that but I couldn't add a new attribute to the DropDownList. Is there a way to add it?

gaetanoM Over a year ago

you need to do it server side while building the select object.....otherwise how can you distinguish one city from another?

Rodrick Over a year ago

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 Over a year ago

I figure it out. THANKS

gaetanoM Over a year ago

...remove .trigger('change'); from my snippet

|

Collectives™ on Stack Overflow

Cascading DropDownList using dynamic IDs in ASP.NET C#

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related