如何复用JavaScript函数监控多个下拉框变化，简化站点扩展？

1. 统一下拉框的通用类标识 #

给所有需要复用事件逻辑的下拉框，新增一个通用CSS类（比如dynamic-dropdown），原有单独类保留不影响样式：

<div class="col-md">
    @{
        var dropDownOneDropdown = Dropdown.GetList();
    }
    @Html.DropDownListFor(m => m.ItemOne, dropDownOneDropdown, "--SELECT--", new { @class = "form-control dropDownOne dynamic-dropdown" })
</div>
<!-- 新增下拉框按同样格式添加通用类 -->
<div class="col-md">
    @{
        var dropDownTwoDropdown = Dropdown.GetAnotherList();
    }
    @Html.DropDownListFor(m => m.ItemTwo, dropDownTwoDropdown, "--SELECT--", new { @class = "form-control dropDownTwo dynamic-dropdown" })
</div>

2. 编写复用的JS事件处理函数 #

将事件绑定到通用类上，用$(this)获取当前触发事件的下拉框，避免重复编写选择器和逻辑：

<script type="text/javascript">
    $(document).ready(function () {
        // 给所有带dynamic-dropdown类的下拉框绑定focusout事件
        $(".dynamic-dropdown").focusout(function () {
            const selectedValue = $(this).val();
            // 可选：获取下拉框的唯一标识，用于后端区分处理
            const dropdownIdentifier = $(this).attr("id");

            $.ajax({
                type: "POST",
                url: '@Url.Action("Method", "Controller")',
                data: { 
                    variable: selectedValue,
                    dropdownId: dropdownIdentifier // 可选，传递给后端区分下拉框
                },
                dataType: "JSON",
                success: function () {
                    location.reload();
                },
                error: function () {
                    console.error("请求处理失败");
                }
            });
        });
    });
</script>

3. 后端控制器适配（按需调整） #

如果需要针对不同下拉框做差异化业务处理，可以修改控制器方法接收额外标识参数：

[HttpPost]
public async Task<ActionResult> Method(string variable, string dropdownId)
{
    // 根据dropdownId区分处理逻辑
    switch(dropdownId)
    {
        case "ItemOne": // 对应DropDownListFor生成的id（由m.ItemOne决定）
            // 处理第一个下拉框的业务逻辑
            break;
        case "ItemTwo":
            // 处理第二个下拉框的业务逻辑
            break;
        default:
            // 默认处理逻辑
            break;
    }

    return Json("", JsonRequestBehavior.AllowGet);
}

额外优化建议 #

• 可以把focusout换成change事件，用户选择选项时立即触发，更贴合下拉框的交互场景
• 如果不同下拉框需要调用不同后端接口，可给下拉框添加data-url属性（如data-url='@Url.Action("Method2", "Controller")'），JS中用$(this).data("url")获取接口地址，进一步提升复用灵活性

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