博客

jQuery UI的Selectmenu change事件

  • Post category:jquery

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 事件，只需要将其绑定到选择菜单，并提供一个事件处理程序即可。可以在事件处理程序中执行任何操作，例如获取所选值并将其输出到控制台，或者使用所选值更新页面内容。

Tags: