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

Question

我为我的问题准备了jsFiddle：

为此，我采用了jQuery UI menu with categories 示例，并且刚刚为每个<LI>-元素添加了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>

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

$("#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() 在这里似乎是一个糟糕的选择，我可能需要通过$("#menu") 来解决这个问题？

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

更新：

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

Answer 1

尝试类似的方法，它会做你想要的更清洁的东西

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

你的例子，不是我的： #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>

否则，对于你的，因为它们是 li，你需要添加以下内容：

• 悬停 CSS 以显示颜色变化
• 点击显示颜色变化，然后取消之前选择的颜色
• 点击事件获取 li 文本，因为 li 没有值，所以 $("#menu li").hasClass("active") 基本上是在这种情况下找到具有颜色突出显示/类活动的 li，然后获取 .text() 值。 ..

简而言之，带有 opt 组的代码在代码方面会更有效率，并且可以设置 CSS 样式，使其看起来像您的示例。