0

I'm trying to use the jQuery Selectmenu to add images to a dropdown in my Angular project. It works and looks great.

The trouble is I cannot intercept the changes to act when the user makes a selection.

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>

The jQuery almost identical to the docs example - this adds the images:

$(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");
});

None of the following does anything:

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);

But, when I remove the id="status" everything works but of course I no longer have my images in the dropdown.

I'm clearly missing something here. How can I use the image enabled jQuery select and actually catch its events?

freginold
  • 3,946
  • 3
  • 13
  • 28
Dave Chambers
  • 2,483
  • 2
  • 32
  • 55
  • I took one of your `change` events and put it into jsFiddle and it works https://jsfiddle.net/bwLvaL1g/1/ Maybe you are not putting those events inside your `$(document).ready` function? – Lixus May 11 '17 at 17:31
  • @Lixus Yep, that works but so does mine until I add the code to display the images, then it breaks :-( – Dave Chambers May 11 '17 at 17:35
  • 2
    Here, try this answer http://stackoverflow.com/questions/24596408/how-to-handle-jquery-ui-selectmenu-change-event – Lixus May 11 '17 at 17:39
  • ok guys thanks. http://stackoverflow.com/a/27514689/1390035 solved my problem ;-) – Dave Chambers May 11 '17 at 18:21

0 Answers0