Я разработал выпадающий список, используя виджет selectMenu пользовательского интерфейса jQuery. Хотя я разработал выпадающий компонент в 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());
}
});
Теперь, написав так, я напечатал значения всех выбранных параметров всех раскрывающихся списков, которые мне не нужны, но я хотел напечатать значение только одного параметра только одного раскрывающегося списка.
Кто-нибудь может подсказать, как поступить в этом случае?
