防止 select2 Dropdown 的 AutoTrigger 事件调用函数
prevent AutoTrigger event of select2 Dropdown to call functions
编辑:
我的目标是当手动选择一个下拉菜单时,它只应该设置另一个下拉菜单的值,而不是在更改事件时调用它的方法
我有 2 个 "select2" 下拉菜单 ..
@*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 >
Dropdown 1 更改事件调用 DDL1Operation() 方法设置 Dropdown 2 的值
function DDL1Operation() {
$("select[name$=DDL2]").val('abc').trigger("change");
});
我想达到的目标
当 "Dropdown 2" 手动更改时 --> 应调用 DDL2Operation()
当 "Dropdown 2" 由于 "Dropdown 1" 更改而自动更改时 --> DDL2Operation() 不应调用
我找不到很多关于 "Select 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[=22 将触发器范围限制为 Select2 =] 事件。您必须相应地编辑函数 DDL1Operation():
function DDL1Operation() {
$("select[name=DDL2]").val('abc').trigger('change.select2');
}
然后您需要将 onclick 处理程序绑定到 jquery:
$("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))
编辑:
我的目标是当手动选择一个下拉菜单时,它只应该设置另一个下拉菜单的值,而不是在更改事件时调用它的方法
我有 2 个 "select2" 下拉菜单 ..
@*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 >
Dropdown 1 更改事件调用 DDL1Operation() 方法设置 Dropdown 2 的值
function DDL1Operation() {
$("select[name$=DDL2]").val('abc').trigger("change");
});
我想达到的目标
当 "Dropdown 2" 手动更改时 --> 应调用 DDL2Operation()
当 "Dropdown 2" 由于 "Dropdown 1" 更改而自动更改时 --> DDL2Operation() 不应调用
我找不到很多关于 "Select 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[=22 将触发器范围限制为 Select2 =] 事件。您必须相应地编辑函数 DDL1Operation():
function DDL1Operation() {
$("select[name=DDL2]").val('abc').trigger('change.select2');
}
然后您需要将 onclick 处理程序绑定到 jquery:
$("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))