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

Question

我为我的问题准备了jsFiddle：

为此，我采用了jQuery UI menu with categories示例，并为每个var data_0="a"; var data_1="b"; var data_2="c"; var data_3="d"; var all=""; for (var i = 0; i <= 3; i++) { all = all + "|" + eval("data_" + i); } alert( all );元素添加了VALUE="some_number"属性：

<LI>

然后我尝试在点击按钮的警报中检索并显示该值：

<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); }); 似乎是一个糟糕的选择，我可能需要通过.val()吗？

我也想知道，为什么在jQuery示例中悬停和项目选择时突出显示列表项 - 但不是在我的jsFiddle中？

更新

clearshot66建议的HTML-select / optgroup / option解决方法很不错，但我想让我的jQuery UI菜单正常工作...我还在jQuery forum发布了我的问题。