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：

＆＃13;

$("[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 );
});

＆＃13;

.active{
  background:red;
}

＆＃13;

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

＆＃13;

回顾一下<li value="bla" />huh</li>是无效的标记，所以请记住在跳转到JS之前首先学习HTML。

Answer 2

使用.map()遍历与选择器匹配的所有元素并获取结果数组。

＆＃13;

$("#go").click(function() {
  var items = $(".list-group-item.active").map(function() {
    return $(this).data("value");
  }).get();
  $("#result").text("You selected " + items.join(', '));
});

$(".list-group-item").click(function() {
  $(this).toggleClass("active");
});

＆＃13;

.active {
  background-color: yellow;
}

＆＃13;

<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 1</li>
  <li class="list-group-item" data-value="12" >Option 2</li>
  <li class="list-group-item" data-value="15" >Option 3</li>
</ul>
<button id="go">What did I select?</button>
<div id="result"></div>

＆＃13;

Answer 3

var activeItems = $('.list-group-item.active');

这将为您提供所有活动项目的数组。从那里你可以遍历它们并获取值。

$.each(activeItems, function(key, item){
   $(item).val(); // this will give you the value of each active item. You can push it into an array or do what ever you need to with it from here
});

小提琴：https://jsfiddle.net/qc4y4102/1/

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

3 个答案: