如何使用 JQuery 从列表中传递多个值

Question

我有以下列表，这些列表可以动态构建并执行与选择框相同的功能。

<ul class="list-group" name="combobox1" id="combobox1">
<li class="list-group-item" value="6" />Option 1</li>
<li class="list-group-item" value="12" />Option 2</li>
<li class="list-group-item" value="15" />Option 3</li>
</ul>

选择列表中的项目时，I用户jQuery将“活动”追加到类中以使“列表组 - 项目活动”。

用户可以从列表中选择一个或多个列表项，然后单击“显示详细信息”，这将在弹出窗口中显示详细信息。此详细信息弹出窗口由按钮中的 onclick 函数触发。我的问题是如何使用 Jquery 获取用户选择通过 onclick 方法传递的列表中的一个或多个项目的值？

onclick=showDetails(itemsvalues) 

这将返回一个值，但是如果选择了多个项目怎么办？

onclick="showdetails($('#combobox1 li.active').val());

谢谢！

Answer 1

首先data-value用于LI元素。
在LI点击添加一些.active类
上点击按钮获取data-value的的.active元素：

$("[data-value]").on("click", function(){
   $(this).toggleClass("active");
});


$("#getValues").on("click", function(){
   var values = $("[data-value].active").map(function(){
     return $(this).data("value");
   }).get();
   alert( values );
});

.active{
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" name="combobox1" id="combobox1">
  <li class="list-group-item" data-value="6">Option 6</li>
  <li class="list-group-item" data-value="12">Option 12</li>
  <li class="list-group-item" data-value="15">Option 15</li>
</ul>

<button id="getValues">GET SELECTED VALUES</button>

总结<li value="bla" />huh</li>是无效的标记，所以记住在跳入 JS 之前先学习 HTML。