如何使用jQuery获取具有相同类的dropdown selectMenu小部件的选定元素？
如何使用jQuery获取具有相同类的dropdown selectMenu小部件的选定元素？
提问于 2018-01-06 00:51:48
我使用jQuery UI selectMenu小部件开发了一个下拉列表。虽然我在Angular中开发了一个下拉组件，并多次重用它。现在的问题是，我为每个下拉列表提供了相同的类名，并且我试图从每个下拉列表中获取选定选项的值。下面给出了代码。
$(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="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
<option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
</optgroup>
<optgroup label="STANDARD OPTIONS">
<option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
<option data-short="K" data-price="$6.00" >Handknob</option>
</optgroup>
<optgroup label="ADDITIONAL OPTIONS">
<option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="H" data-price="$4.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="$0.00">Standard Screw Adjustment dkjsahdksajd sdhsdl sdshad ;sldh sd;lsa d;lsajd</option>
<option data-short="K" data-price="$0.00">Standard Screw Adjustment</option>
</optgroup>
<optgroup label="STANDARD OPTIONS">
<option data-short="C" data-price="$5.00" >Tamper Resistant - Factory Set</option>
<option data-short="K" data-price="$6.00" >Handknob</option>
</optgroup>
<optgroup label="ADDITIONAL OPTIONS">
<option data-short="F" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="G" data-price="$4.00">Hex Head Screw with Locknut</option>
<option data-short="H" data-price="$4.00" >Hex Head Screw with Locknut</option>
</optgroup>
</select>
</body>
</html>
现在，下面给出了我为获取每个下拉列表中的选定元素而编写的jQuery代码。
$('.options').mySelectMenu({
change: function (event, ui) {
console.log($('option:selected').text());
}
});现在，像这样打印所有下拉列表中所有选定选项的值，这是我不想要的，但我想要的是只打印一个下拉列表中一个选项的值。
在这种情况下，有人能建议如何做到这一点吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-01-06 00:56:54
$('.options').mySelectMenu({
change: function (event, ui) {
console.log($(this).find('option:selected').text());
}
});$(this)为函数提供上下文，它只从您使用的下拉列表中选择选项。
Stack Overflow用户
发布于 2021-10-15 05:32:33
您可以在传递给事件处理程序的ui变量中找到您要查找的文本和标签。
ui.item.label页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48117924
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号