select 改变时触发事件

Question

我正在使用 JQuery UI 来显示 select 下拉菜单，每个选项都有图标。我想在用户点击一个选项时触发一个事件。

我的 HTML :

    $(function() {

      $.widget("custom.iconselectmenu", $.ui.selectmenu, {
        change: function(event, ui) {
          alert("TEST");
        },
        _renderItem: function(ul, item) {
          var li = $("<li>", {
            text: item.label
          });

          if (item.disabled) {
            li.addClass("ui-state-disabled");
          }

          $("<span>", {
              style: item.element.attr("data-style"),
              "class": "ui-icon " + item.element.attr("data-class")
            })
            .appendTo(li);

          return li.appendTo(ul);
        }
      });


      $("#people")
        .iconselectmenu()
        .iconselectmenu("menuWidget")
        .addClass("ui-menu-icons avatar");
    });

我的 JQuery :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <select name="people" id="people">
      <option value="1" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>
      <option value="2" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option>
      <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option>
    </select>

Answer 1

考虑以下代码：http://jsfiddle.net/Twisty/brsfmk5d/5/

$(function() {
  $.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function(ul, item) {
      var li = $("<li>", {
        text: item.label
      });
      if (item.disabled) {
        li.addClass("ui-state-disabled");
      }
      $("<span>", {
        style: item.element.attr("data-style"),
        class: "ui-icon " + item.element.attr("data-class")
      })
      .appendTo(li);
      return li.appendTo(ul);
    }
  });

  $("#people").iconselectmenu({
    select: function(e, ui) {
      console.log("Selected: " + ui.item.label);
    }
  })
  .addClass("ui-menu-icons avatar");
});

当一个项目被选中时，select回调被触发，您可以在控制台中看到选中的标签。

change( event, ui ) Type: selectmenuchange

Triggered when the selected item has changed. Not every select event will fire a change event.

select( event, ui ) Type: selectmenuselect

Triggered when a menu item is selected.

希望对您有所帮助。

select 改变时触发事件

Trigger event when the select is changed

jquery

jquery-ui