c# - jQuery 和 C# 动态下拉菜单

Question

我在一个类中使用几个 C# 列表在一个表单中创建两个下拉列表 - 一个用于部门，一个用于子部门。

当用户单击部门时，我希望子部门中的值自动使用 jQuery 更改。

到目前为止，我的 html 表单有以下内容：

<tr>
        <td><strong>Department *</strong></td>
        <td>
            <select name="ctl00$mainContent$uxDDListDepartment" id="ctl00_mainContent_uxDDListDepartment">
            <% if (DepartmentsList != null && DepartmentsList.Count > 0)
               { %>
                <% foreach (var i in DepartmentsList)
                   { %>
                    <option value="<%= i.DepartmentId %>"
                    <% if (Job != null && Job.Count > 0) { %>
                        <% foreach (var j in Job) { %>
                            <% if(j.Department == i.Description) { %>selected="selected"<% } %>    
                        <% } %>               
                   <% } %>                        
                    ><%= i.Description %></option>
                <% } %>               
           <% } %>
           </select>
           <span id="ctl00_mainContent_uxValDDListDepartment" class="error" style="color:#891F11;display:none;">Please enter a department</span>
        </td>
    </tr>
    <tr>
        <td><strong>Sub Department</strong></td>
        <td>
            <select name="ctl00$mainContent$uxDDListSubDepartment" id="ctl00_mainContent_uxDDListSubDepartment">               
             <% if (SubDepartmentsList != null && SubDepartmentsList.Count > 0) { %>
                <% foreach (var i in SubDepartmentsList)
                   { %>
                         <% if (Job != null && Job.Count > 0) { %>
                            <% foreach (var j in Job) { %>
                                <% if(j.DepartmentId == i.DepartmentId) { %>                           
                                        <option value="<%= i.SubDepartmentId %>"><%= i.Description %></option>
                                 <% } %>
                              <% } %>               
                        <% } %> 
                <% } %>               
           <% } %>
            </select>
        </td>
    </tr>

而对于 jQuery（我还没有走多远！），我所拥有的是：

// Departments
$("#ctl00_mainContent_uxDDListDepartment").change(function () {

    var departmentId = $('#ctl00_mainContent_uxDDListDepartment').val();

    alert(departmentId);


});

拉出部门ID。

当用户更改部门值时，如何动态获取表单以更改子部门值？

谢谢

Answer 1

如果您打算在客户端实现过滤逻辑，那么您可以使用 $(selector).each 来获取下拉列表的选项并执行您的逻辑。

var options = [];
$("#ctl00_mainContent_uxDDListSubDepartment option").each(function()
{
    options.push($(this).val());
});