Javascript ASP.NET C中使用动态ID的级联DropDownList

我正在尝试级联使用此代码动态创建的country和city 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：我添加了这个小提琴：

---

该示例适用于特定ID国家和城市。？我如何才能使此功能适用于多个动态ID？

对于您的问题，可能有许多不同的解决方案。总之，我建议在您的国家/地区选择框中附加一个变更事件处理程序，以显示/隐藏城市选项

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

片段：

$'[id^=country_uz]'。关于“更改”，函数E{ var cityId='city'+this.id.split'.pop； var cityVal=此值； var fToBeSelected=$+cityId+'option'.hide.filterfunction{ 返回this.dataset.country==cityVal； }.show.first.val； $+cityId.valftobe已选定； }.触发“改变”； 国家一 国家二 国家三 城市一国一 城市二国家一 城市一国家二 城市二国家二 城市一国三 城市二国家三

---

请编辑您的问题并添加您尝试过的javascript或jQuery，并准确解释您想做什么以及您的意思。我尝试使用javascript和jQuery，但我在filterCity12345应该做什么方面失败了？@gaetanoM这就是我试图弄明白的。我想把那些不属于国家的城市隐藏起来，但我不知道这是否是个好主意。我编辑了一些代码以简化。我取出了filterCity12345。我尝试了类似的方法，但无法向DropDownList添加新属性。有没有办法添加它？您需要在构建select对象时在服务器端执行此操作……否则如何区分一个城市和另一个城市？我尝试了DDL_city.Attributes.Adddata country，countryID；但这会将属性添加到select而不是选项中。我怎么才能添加到选项中呢？我知道了。谢谢…删除。触发“更改”；从我的片段