获取jQueryUI菜单中选中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") 基本上找到颜色为 highlight/class 的 li 在这种情况下处于活动状态，然后获取.text() 值...

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

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

Get the value attribute of the selected LI element in jQuery UI menu

jquery

jquery-ui

jquery-selectors

html-lists

jquery-ui-menu