jQuery UI 的 Selectmenu 组件提供了一个 change 事件,该事件在选择菜单的值发生更改时触发。在本教程中,我们将详细介绍 Selectmenu 的 change 事件的使用方法。
change 事件基本语法如下:
$( ".selector" ).selectmenu({
change: function( event, ui ) {}
});
其中,”.selector” 是选择菜单的 CSS 选择器,change 是事件名称,function( event, ui ) 是事件处理程序。
以下两个示例说明:
示例一:使用 Selectmenu 的 change 事件在选择菜单的值更改时显示所选值
$( "#my-selectmenu" ).selectmenu({
change: function( event, ui ) {
let selectedValue = ui.item.value;
console.log("Selected value: " + selectedValue);
}
});
这将创建一个名为 my-selectmenu 的选择菜单,并将其绑定到 change 事件。当选择菜单的值更改时,事件处理程序将获取所选值并将其输出到控制台。
示例二:使用 Selectmenu 的 change 事件在选择菜单的值更改时更新页面内容
$( "#my-selectmenu" ).selectmenu({
change: function( event, ui ) {
let selectedValue = ui.item.value;
$( "#my-content" ).html("You selected: " + selectedValue);
}
});
这将创建一个名为 my-selectmenu 的选择菜单,并将其绑定到 change 事件。当选择菜单的值更改时,事件处理程序将获取所选值并将其用于更新页面内容。
总结:
jQuery UI 的 Selectmenu 组件提供了一个 change 事件,该事件在选择菜单的值发生更改时触发。要使用 change 事件,只需要将其绑定到选择菜单,并提供一个事件处理程序即可。可以在事件处理程序中执行任何操作,例如获取所选值并将其输出到控制台,或者使用所选值更新页面内容。