0

我正在尝试使用jQuery Selectmenu将图像添加到我的 Angular 项目的下拉列表中。它工作并且看起来很棒。

问题是当用户进行选择时，我无法拦截更改以执行操作。

HTML：

<form name="moose" id="goose" method="post" action="">
  <select name="foose" id="status" onchange="myfunction();">
    <option value="-1" data-class="avatar" data-style="background-image: url(/img/rejected_small.png);">Rejected</option>
    <option value="0" data-class="avatar" data-style="background-image: url(/img/inProgress_small.png);">In Progress</option>
    <option value="1" data-class="avatar" data-style="background-image: url(/img/done_small.png);">Completed</option>
    <option value="" data-class="avatar" data-style="background-image: url(/img/none.png);">Undefined</option>
  </select>

jQuery 几乎与文档示例相同 - 这添加了图像：

$(function() {
  $.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function(ul, item) {
      var li = $("<li>"),
        wrapper = $("<div>", {
          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(wrapper);

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

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

以下都没有做任何事情：

document.getElementById('goose').foose.onchange = function() {
  console.log('Set Status to: ' + this.value);
};

$('#goose').on('change', function() {
  alert(this.value);
})

$('#status').change(function() {
  console.log('goo');
  // $(this).val() will work here
});

$('#status').on('change', function() {
  alert(this.value);
})

$('#goose').change(function() {
  console.log('goo');
  // $(this).val() will work here
});

(function($) {
  $.fn.myfunction = function() {
    alert('hello world');
    return this;
  };
})(jQuery);

但是，当我删除id="status"一切正常时，当然我的图像不再出现在下拉列表中。

我显然在这里遗漏了一些东西。如何使用启用的图像jQuery select并实际捕获其事件？

4

0 回答 0