如何使用 jQuery 获取具有相同类的下拉 selectMenu 小部件的选定元素？

Question

我使用 jQuery UI selectMenu 小部件开发了一个下拉列表。虽然我在Angular里面开发了一个下拉组件，并且复用了很多次。现在的问题是，我为每个下拉列表指定了相同的 class 名称，并且我试图从每个下拉列表中获取所选选项的值。下面是代码。

$(function() {
  $.widget("custom.mySelectMenu", $.ui.selectmenu, {
    _renderMenu: function(ul, items) {
      console.log(items);
      var that = this,
        currentCategory = "";
      ul.parent().prepend("<ul class='ui-header ui-menu ui-corner-bottom ui-widget ui-widget-content'><li class='ui-menu-item'><span class='ui-menu-item-wrapper'>" + "CODE" + "</span><span class='ui-menu-item-wrapper'>" + "DESCRIPTION" + "</span><span class='ui-menu-item-wrapper'>" + "PRICE" + "</span></li></ul>");
      $.each(items, function(index, item) {
        var li, name, short, price;
        if (item.optgroup != currentCategory) {
          ul.append(
            "<li class='ui-selectmenu-optgroup ui-menu-divider ui-selectmenu-category'>" + item.optgroup + "</li>"
          );
          currentCategory = item.optgroup;
        }
        li = that._renderItemData(ul, item);
        console.log(ul);
        name = li.text();
        short = item.element.data("short");
        price = item.element.data("price");
        // console.log(li, short, price);
        li.prepend(
          $("<span>", {
            class: "short"
          }).html(short)
        );
        li.append(
          $("<span>", {
            class: "price"
          }).html(price)
        );
        if (item.optgroup) {
          li.attr("aria-label", item.optgroup + " : " + item.label);
        }
      });
    }
  });

  $(".options").mySelectMenu({
    width: 300
  });
  $(".options")
    .mySelectMenu("menuWidget")
    .addClass("overflow");
});

.ui-menu .ui-menu-item {
  display: table;
  width: 100%;
}

.ui-selectmenu-category {
  color: #5f5f5f;
  padding: 0.5em 0.25em;
  min-width: 290px;
  font-style: italic;
}

.ui-header {
  font-weight: bold;
  position: absolute;
  background-color: #004600;
  z-index: 1;
  height: 25px;
  width: 100%;
}

.ui-header .ui-menu-item .ui-menu-item-wrapper {
  padding: 0px;
}

#options-menu {
  margin-top: 25px;
}

.ui-menu-item .ui-menu-item-wrapper {
  display: table-cell;
  vertical-align: top;
  padding: 1em 2px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  border-width: 1px 0px 1px 0px;
  border-color: #cccccc;
  background-color: #e4ebf1;
  color: #000;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active.short {
  color: #2e6d99;
}

.ui-menu-item div.ui-menu-item-wrapper {
  width: 290px;
}

.ui-menu-item .short {
  color: #2e6d99;
  font-weight: strong;
  width: 30px;
  padding-left: 0.5em;
  position: relative;
}

.ui-menu-item .price {
  font-weight: strong;
  width: 75px;
  margin-right: -6px;
}

.overflow {
  height: 150px;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <label for="options">Select an Option:</label>
  <select class="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="[=14=].00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="[=14=].00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price=".00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price=".00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price=".00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>
  <br><br>
  <label for="options">Select an Option:</label>
  <select class="options">
  <optgroup label="PREFERRED OPTIONS">
    <option data-short="L" data-price="[=14=].00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
    <option data-short="K" data-price="[=14=].00">Standard Screw Adjustment</option>
  </optgroup>
  <optgroup label="STANDARD OPTIONS">
    <option data-short="C" data-price=".00" >Tamper Resistant - Factory Set</option>
    <option data-short="K" data-price=".00" >Handknob</option>
  </optgroup>
  <optgroup label="ADDITIONAL OPTIONS">
    <option data-short="F" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="G" data-price=".00">Hex Head Screw with Locknut</option>
    <option data-short="H" data-price=".00" >Hex Head Screw with Locknut</option>
  </optgroup>
</select>
</body>

</html>

现在，下面给出的是我为获取每个下拉列表中的选定元素而编写的 jQuery 代码。

  $('.options').mySelectMenu({
        change: function (event, ui) {
          console.log($('option:selected').text());
        }
      });

现在，这样写会打印所有下拉列表的所有选定选项的值，我不想要但我想要的是只打印一个下拉列表的一个选项的值。

谁能建议在这种情况下该怎么做？

Answer 1

$('.options').mySelectMenu({
    change: function (event, ui) {
        console.log($(this).find('option:selected').text());
    }
});

$(this) 为该函数提供上下文，它仅从您使用的下拉列表中选择选项。

Answer 2

您正在寻找的文本，即标签，在传递给事件处理程序的 ui 变量中可供您使用。

ui.item.label

如何使用 jQuery 获取具有相同类的下拉 selectMenu 小部件的选定元素？

How to get the selected element of the dropdown selectMenu widgets having the same classes using jQuery?

javascript

jquery

jquery-ui

drop-down-menu

jquery-ui-selectmenu

如何使用 jQuery 获取具有相同 类 的下拉 selectMenu 小部件的选定元素？

How to get the selected element of the dropdown selectMenu widgets having the same classes using jQuery?

javascript

jquery

jquery-ui

drop-down-menu

jquery-ui-selectmenu

如何使用 jQuery 获取具有相同类的下拉 selectMenu 小部件的选定元素？