javascript - 如何使用 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>

当选择列表中的项目时，我使用 Jquery 将“active”附加到类中以使“list-group-item active”。

用户可以从列表中选择一个或多个列表项，然后单击“显示详细信息”，这将在弹出窗口中提供详细信息。此详细信息弹出窗口由按钮中的 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。