在jqueryui菜单中获取所选LI元素的value属性

我为我的问题准备了一份报告：

为此，我举了一个例子，刚刚为每个元素添加了VALUE=some_number属性：

但是.val在这里似乎不是一个好的选择，我可能需要浏览一下$menu

我还想知道，为什么在jQuery示例中，悬停和项选择上的列表项会高亮显示，而在我的JSFIDLE中却没有

更新：

---

clearshot66建议的HTML select/optgroup/option变通方法很好，但我希望我的jQuery UI菜单能够正常工作。。。我还将我的问题发布在了。

试试类似的方法，它会帮你找到更干净的

另外请注意，您的悬停不起作用，因为您需要在CSS上添加悬停属性

你的例子，而不是我的： 菜单li:悬停{背景色：黄色；}

$'btn'。单击函数{ var值=$'menu'.val； 警报“所选菜单值：”+值； }; 菜单{溢出：自动；} 沃尔沃汽车 萨博 梅赛德斯 奥迪

<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>

$("#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);
});