如何使用jQuery查找多层嵌套GridView中的DDLCourseMother下拉控件

可行解决方案 #

方案1：添加自定义CSS类（最推荐，无匹配误差） #

直接给目标DropDownList控件添加专属自定义样式类，完全规避ID匹配的误判问题，不受嵌套层级影响：
修改服务端控件代码：

<asp:DropDownList runat="server" ID="DDLCourseMother" CssClass="ddl-course-mother"></asp:DropDownList>

修改jQuery初始化代码：

$(function () {
    $('.ddl-course-mother').select2();
});

方案2：优化ID选择器精准度 #

如果不想修改服务端控件代码，可以把模糊匹配改为结尾匹配，WebForm生成的客户端ID一定会以服务端设置的ID作为后缀，不会出现误匹配：

$(function () {
    // $= 表示匹配id属性以指定字符串结尾的元素
    $('[id$=DDLCourseMother]').select2();
});

方案3：限定嵌套层级匹配（最高精准度） #

如果需要完全限定在指定的三层GridView范围内，避免页面其他区域存在同后缀ID的控件被误选，可以组合层级选择器：

$(function () {
    $('[id*=ParentGvMother] [id*=GvChildBlock] [id*=GvInBlocks] [id$=DDLCourseMother]').select2();
});

特殊场景注意事项 #

如果你的子GridView是点击父层加号后才异步加载/显示的，页面初始化时目标控件还未插入DOM，需要在展开Panel的回调逻辑里执行select2初始化代码，不要只放在页面ready事件中。

内容的提问来源于stack exchange，提问作者KiterCodes