[英]Get the value attribute of the selected LI element in jQuery UI menu
I have prepared a jsFiddle for my question: 我为我的问题准备了jsFiddle :
For that I have taken the jQuery UI menu with categories example and have just added VALUE="some_number"
attribute to each <LI>
-element: 为此,我选择了带有类别示例的jQuery UI菜单,并刚刚向每个
<LI>
VALUE="some_number"
添加了VALUE="some_number"
属性:
<ul id="menu">
<li class="ui-widget-header"> Category 1 </li>
<li value="1"> Option 1 </li>
<li value="2"> Option 2 </li>
<li value="3"> Option 3 </li>
<li class="ui-widget-header"> Category 2 </li>
<li value="4"> Option 4 </li>
<li value="5"> Option 5 </li>
<li value="6"> Option 6 </li>
</ul>
Then I am trying to retrieve and display that value in an alert on a button click: 然后,我尝试在单击按钮的警报中检索并显示该值:
$("#menu").menu({
items: '> :not(.ui-widget-header)'
});
$('#btn').button().click(function(ev) {
ev.preventDefault();
var value = $('#menu').val();
// var value = $('#menu li').attr('value');
alert('Selected menu value: ' + value);
});
but the .val()
seems to be a bad choice here, I probably need to go through $("#menu")
for that? 但是
.val()
在这里似乎是一个不好的选择,我可能需要为此使用$("#menu")
吗?
Also I wonder, why are the list items highlighted on hover and on item selection in the jQuery example - but not in my jsFiddle? 我也想知道,为什么列表项在jQuery示例中的悬停和项目选择上高亮显示,但在我的jsFiddle中却没有?
UPDATE: 更新:
The HTML-select/optgroup/option workaround suggested by clearshot66 is nice, but I would like to get my jQuery UI menu working... I have also posted my problem at the jQuery forum . clearshot66建议的HTML-select / optgroup / option解决方法很好,但是我想使jQuery UI菜单正常工作...我也将问题发布在jQuery论坛上 。
Try something similar to this, it'll do what you're looking for a little cleaner 尝试类似的事情,它会做您想要的清洁剂
Also note, your hover isn't working because you need to add a hover attribute on your CSS 另请注意,您的悬停功能不起作用,因为您需要在CSS上添加一个悬停属性
Example for yours, not mine: #menu li:hover{background-color:yellow;}
您而不是我的示例:
#menu li:hover{background-color:yellow;}
$('#btn').click(function() { var value = $('#menu').val(); alert('Selected menu value: ' + value); });
#menu{overflow:auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="menu" size='6'> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> <p><input type="button" id="btn" value="Show Selected" /></p>
Otherwise, for yours, since they're li, you'd need to add the following: 否则,对于您来说,由于他们是li,因此您需要添加以下内容:
$("#menu li").hasClass("active")
basically finding the li that has the color highlight/class active in this case, then getting the .text() value... $("#menu li").hasClass("active")
基本上找到在这种情况下具有颜色突出显示/类别处于活动状态的li,然后获取.text()值... In short, a with opt groups would be much more efficient code wise, and can be CSS styled to look like your example as well. 简而言之,带有opt组的代码明智得多,并且可以使用CSS样式使其看起来也像您的示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.