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

Question

I have prepared a jsFiddle for my question:

For that I have taken the jQuery UI menu with categories example and have just added VALUE="some_number" attribute to each <LI>-element:

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

Also I wonder, why are the list items highlighted on hover and on item selection in the jQuery example - but not in my 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 · Accepted Answer · 2018-05-10T16:32:31.593

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

Example for yours, not mine: #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:

on hover css to show color change
on click to show color change, then uncolor the previous selected
on click event to get the li text, since li don't have value it would be $("#menu li").hasClass("active") basically finding the li that has the color highlight/class active in this case, then getting the .text() value...

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.

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

1 Answers1