防止 select2 下拉列表的自动触发事件调用函数

prevent AutoTrigger event of select2 Dropdown to call functions

本文关键字：事件 调用 函数 select2 下拉列表 防止      更新时间：2023-09-26

>Edit ：

我的目标是当手动选择一个下拉列表时，它只应该设置另一个下拉列表的值，而不是在更改事件时调用其方法

我有 2 个"选择2"下拉菜单..

@*Dropdown 1*@
<div >
@Html.DropDownList(Model.DDL1, new SelectList(GetCmnlSection(), "Value", "Text", Model.DDL1),new { onchange = "DDL1Operation();" })
</div>
@*Dropdown 2*@
<div >
@Html.DropDownList(Model.DDL2, new SelectList(GetCmnlSection(), "Value", "Text", Model.DDL2),new { onchange = "DDL2Operation();" })
        </div>

<script type="text/javascript">
    $(function () { 
    var $ddl1 = $("select[name$=DDL1]");
        $ddl1.select2();
        var $ddl2 = $("select[name$=DDL2]");
        $ddl2.select2();
}
</script >

下拉列表 1 更改事件调用 DDL1Operation（） 方法，该方法设置下拉列表 2 的值 

function DDL1Operation() {
            $("select[name$=DDL2]").val('abc').trigger("change");
        });

我想要实现的目标

  1. 当"下拉列表 2"手动更改时 -> DDL2Operation（） 应调用

    2. 当"下拉列表

  2. 2"由于"下拉列表 1"更改而自动更改时 --> 不应调用 DDL2Operation（）

我找不到很多关于"选择 2"下拉菜单的帖子。可以通过其他一些JQuery方法完成吗？

更新

 @*City Dropdown*@
 @Html.DropDownList(Model.chiefTownProp, new SelectList(GetchiefTown(), new { onchange = "PopualateFromCity();" })
 @*Commune Dropdown*@
  @Html.DropDownList(Model.communeProp, new SelectList(Getcommunes(), "Value", "Text", Model.communeId),new { onchange = "PopulateFromCommune();" })

及其功能

 function PopualateFromCity() {
 $("select[name$=communeId]").val('1').trigger("change.select2");  
 }

 function PopulateFromCommune() { alert('PopulateFromCommune');}

"trigger（"change.select2"）"也无助于阻止 PopulateFromCommune 的 onchange 事件

Select2

不侦听下拉列表中的自定义事件，但您可以使用 jQuery 的事件命名空间通过触发 change.select2 事件将触发器范围限制为 Select2。您必须相应地编辑函数 DDL1Operation（）：

function DDL1Operation() {
    $("select[name=DDL2]").val('abc').trigger('change.select2');
}

然后你需要用jquery绑定onclick处理程序：

$("select[name=DDL1]").change(function(){DDL1Operation()});
$("select[name=DDL2]").change(function(){DDL2Operation()});

并从 .NET 代码中的 <select> 元素中删除 onclick 属性：

@*City Dropdown*@
@Html.DropDownList(Model.chiefTownProp, new SelectList(GetchiefTown())
@*Commune Dropdown*@
@Html.DropDownList(Model.communeProp, new SelectList(Getcommunes(), "Value", "Text", Model.communeId))
相关文章：