Получить атрибут значения выбранного элемента LI в меню jQuery UI - PullRequest
Новая
       25

Получить атрибут значения выбранного элемента LI в меню jQuery UI

0 голосов
/ 10 мая 2018

Я подготовил jsFiddle для моего вопроса:

screenshot

Для этого я взял меню jQuery UI с примерами категорий и только что добавил атрибут 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() кажется плохим выбором, мне, вероятно, нужно пройти через $("#menu") для этого?

Также мне интересно, почему элементы списка подсвечиваются при наведении курсора и выборе элемента в примере jQuery, а не в моем jsFiddle?

UPDATE:

Обходной путь HTML-select / optgroup / option, предложенный clearshot66, хорош, но я бы хотел, чтобы мое меню jQuery UI работало ... Я также опубликовал свою проблему на форуме jQuery .

1 Ответ

0 голосов
/ 10 мая 2018

Попробуйте что-то похожее на это, оно сделает то, что вы ищете, немного чище

Также обратите внимание, что ваш курсор не работает, потому что вам нужно добавить атрибут hover в 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 () ...

Короче говоря, a с группами opt будет намного большеэффективный код, и может быть в стиле CSS, чтобы быть похожим на ваш пример.

...