Инициирующее событие, когда выбор изменяется

Question

Я использую пользовательский интерфейс JQuery для отображения выпадающего меню выбора со значками для каждого параметра. Я хотел бы вызвать событие, когда пользователь нажимает на опцию.

Вот фрагмент: http://jsfiddle.net/L8p5n41j/

Мой 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, и вы видите выбранную метку в консоли.

изменить (событие, пользовательский интерфейс) Тип: selectmenuchange

Срабатывает при изменении выбранного элемента.Не каждое событие select инициирует событие изменения.

select (event, ui) Тип: selectmenuselect

Срабатывает при выборе элемента меню.

Надеюсь, это поможет.