Блог

Главная - Вопросы по программированию - Запуск события при изменении выбора

Запуск события при изменении выбора

#jquery #jquery-ui

#jquery #jquery-пользовательский интерфейс

Вопрос:

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

Вот фрагмент :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(amp;apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsteridamp;amp;r=gamp;amp;s=16amp;apos;);">John Resig</option>
      <option value="2" data-class="avatar" data-style="background-image: url(amp;apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsteridamp;amp;r=gamp;amp;s=16amp;apos;);">Tauren Mills</option>
      <option value="3" data-class="avatar" data-style="background-image: url(amp;apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsteridamp;amp;r=gamp;amp;s=16amp;apos;);">Jane Doe</option>
    </select>

Комментарии:

1. Я сделал для вас фрагмент, который я имел в виду.

2. Поскольку вы используете SelectMenu в своем виджете, вы можете использовать стандартное select событие для этого виджета: api.jqueryui.com/selectmenu/#event-select

3. Какую функцию или действие вы хотите вызвать при select срабатывании?

Ответ №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 событие запускает событие изменения.

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

Срабатывает при выборе пункта меню.

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