Question

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

我的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）类型：selectmenuchange

当所选项目已更改时触发。并非每个select事件都会触发更改事件。

select（event，ui）类型：selectmenuselect

在选择菜单项时触发。

希望有帮助。

选择更改时触发事件

1 个答案: