Question

我要创建一个带有图标的选择菜单，并且您选择的文本应该显示在顶部的文本（或图标）中。我的问题是on change方法不起作用。

怎么了？

$(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);
    },
    select: function(event, ui) {
      console.log("test")
    }
  });

  $("#icons_id")
    .iconselectmenu()
    .iconselectmenu("menuWidget")
    .addClass("ui-menu-icons avatar");

});

var select = document.getElementById("icons_id");

var options = ["Aufgabe", "Gruppe", "Schritt", "Werkzeug", "Dokument"];

for (var i = 0; i < options.length; i++) {

  var opt = options[i];

  var el = document.createElement("option");

  var icon = opt;

  el.style

  el.textContent = opt;

  el.value = opt;


  select.appendChild(el);

}

function myFunction() {

  var x = document.getElementById("icons_id").value;

  document.getElementById("demo_text").innerHTML = "You selected: " + x;

}

option.avatar {
  background-repeat: no-repeat !important;
  padding-left: 20px;
}

.avatar .ui-icon {
  background-position: left top;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<h2 id="test">Dropdown Menu</h2>

<p id="demo_text">You selected: </p>

<select name="icons_name" id="icons_id" onchange="myFunction()">

  <option data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">1</option>

  <option data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">2</option>

  <option data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">3</option>

</select>

Answer 1

原始change元素的<select>事件不会触发，因为您要操纵Selectmenu小部件而不是<select>的元素。您可以在原始元素上手动触发change，例如.trigger("change")，但您可以考虑使用Selectmenu widget's change event来启动功能。

在下面的代码段中，我将change事件从小部件定制中移出，并移到了iconselectmenu初始化中。

赞：

.iconselectmenu({
  change: myFunction
})

（有关定义select事件处理程序的另一种方法，请参见Tom Maher's answer。）

工作示例：

$(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);
    }
  });

  $("#icons_id")
    .iconselectmenu({
      change: myFunction
    })
    .iconselectmenu("menuWidget")
    .addClass("ui-menu-icons avatar");

});


var select = document.getElementById("icons_id");
var options = ["Aufgabe", "Gruppe", "Schritt", "Werkzeug", "Dokument"];

for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  var icon = opt;
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
}

function myFunction() {
  var x = document.getElementById("icons_id").value;
  document.getElementById("demo_text").innerHTML = "You selected: " + x;
}

option.avatar {
  background-repeat: no-repeat !important;
  padding-left: 20px;
}

.avatar .ui-icon {
  background-position: left top;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<h2 id="test">Dropdown Menu</h2>
<p id="demo_text">You selected: </p>

<select name="icons_name" id="icons_id" onchange="myFunction()">
  <option data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">1</option>
  <option data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">2</option>
  <option data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">3</option>
</select>

编辑：

将图标添加到#demo_text的一种方法是引用渲染小部件时使用的相同data-style属性。在change事件处理程序中，我要抓取背景图像，并创建一个图标元素以及所选选项的值附加到#demo_text上。

此外，由于您使用的是jQuery，因此我选择使用jQuery而不是原始JavaScript编写代码。

$(function() {
  $.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function(ul, item) {

      var li = $("<li>");

      var 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);

    }
  });

  $("#icons_id")
    .iconselectmenu({
      change: myFunction
    })
    .iconselectmenu("menuWidget")
    .addClass("ui-menu-icons avatar");

});


var options = ["Aufgabe", "Gruppe", "Schritt", "Werkzeug", "Dokument"];
var $select = $('#icons_id');
var $display = $('#demo_text');

$.each(options, function() {
  var $option = $('<option>', {
    "value": this,
    "text": this
  });
  $select.append($option);
});

function myFunction(e, ui) {
  var $value = $("<span>", {
    "text": $select.val()
  });
  var $icon = $("<span>", {
    "style": ui.item.element.data("style"),
    "class": "ui-icon "
  });
  $display.text('You selected: ').append($icon, $value);
}

option.avatar {
  background-repeat: no-repeat !important;
  padding-left: 20px;
}

.avatar .ui-icon {
  background-position: left top;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<h2 id="test">Dropdown Menu</h2>
<p id="demo_text">You selected: </p>

<select name="icons_name" id="icons_id" onchange="myFunction()">
  <option data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">1</option>
  <option data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">2</option>
  <option data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">3</option>
</select>

编辑：

下面是一个示例，演示如何仅从对象数组中填充<select>元素，以便您可以为每个<option>指定一个图标。

我还使用了this post中的代码来为用户选择下拉菜单显示一个“占位符”。

我还从change事件切换到select事件。默认情况下，第一个选项处于选中状态（即使显示了占位符），因此，change不会再次触发。

$(function() {

  /* Customize Widget */

  $.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _drawButton: function() {
      this._super();
      var selected = this.element
        .find('[selected]')
        .length,
        placeholder = this.options.placeholder;

      if (!selected && placeholder) {
        this.buttonItem.text(placeholder);
      }
    },
    _renderItem: function(ul, item) {

      var style = "background-image:url('" + item.element.attr("data-icon") + "')";

      var li = $("<li>");

      var wrapper = $("<div>", {
        "text": item.label,
      });

      if (item.disabled) {
        li.addClass("ui-state-disabled");
      }

      $("<span>", {
        "style": style,
        "class": "ui-icon"
      }).appendTo(wrapper);

      return li.append(wrapper).appendTo(ul);

    }
  });

  /* Define Select Handler */

  function chooseOption(e, ui) {
    var style = "background-image:url('" + options[ui.item.index]['data-icon'] + "')";
    var $value = $("<span>", {
      "text": $select.val()
    });
    var $icon = $("<span>", {
      "style": style,
      "class": "ui-icon"
    });
    $display.text('You selected:').append($icon, $value);
  }

  /* Define Select Options */

  var options = [{
      'value': 'Aufgabe',
      'text': 'Aufgabe',
      'data-icon': 'http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16'
    },
    {
      'value': 'Gruppe',
      'text': 'Gruppe',
      'data-icon': 'http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16'
    },
    {
      'value': 'Schritt',
      'text': 'Schritt',
      'data-icon': 'http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16'
    },
    {
      'value': 'Werkzeug',
      'text': 'Werkzeug',
      'data-icon': 'https://picsum.photos/30/30/?image=2'
    },
    {
      'value': 'Dokument',
      'text': 'Dokument',
      'data-icon': 'https://picsum.photos/30/30/?image=12'
    }
  ];

  /* Generate Select Options */

  var $select = $('#icons_id');
  var $display = $('#demo_text');

  $.each(options, function() {
    var $option = $('<option>', this);
    $select.append($option);
  });

  /* Initialize SelectMenu */

  $("#icons_id")
    .iconselectmenu({
      placeholder: 'Select an Option',
      select: chooseOption
    })
    .iconselectmenu("menuWidget")
    .addClass("ui-menu-icons");

});

.ui-icon {
  background-position: left center;
}

#demo_text .ui-icon {
  margin: 0 .5em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<p id="demo_text"></p>
<select name="icons_name" id="icons_id"></select>

Answer 2

我认为您遇到的问题是，您正在向窗口小部件中添加选择方法，而不是在用作事件处理程序的基本窗口小部件（selectmenu）上设置选择方法。

以下方法应该起作用：

$(function() {
  $.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _create: function(){
        this.element.on("selectmenuselect", function( event, ui ) {
            console.log("test");
        } ););
    }

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

Answer 3

您错过了期权的价值

    function myFunction() {
      var x = document.getElementById("icons_id").value;    
      document.getElementById("demo_text").innerHTML = "You selected: " + x;    
    }

    <h2 id="test">Dropdown Menu</h2>

    <p id="demo_text">You selected: </p>

    <select name="icons_name" id="icons_id" onchange="myFunction()">

      <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;);">1</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;);">2</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;);">3</option>

    </select>

jQuery selectmenu onchange

3 个答案:

编辑：

编辑：