I have the following list that gets dynamically built and performs the same function as a select box would do.

<ul class="list-group" name="bobox1" id="bobox1">
<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>

When an item in the list is selected i user Jquery to append 'active' into the class to make 'list-group-item active'.

A user can select one or more list items from the list and click 'Show Details' which will give them details in a popup. This details popup is traggered by the onclick function in a button. My question is how do I use Jquery to get the values of one or more items in the list that a user has selected to pass via the onclick method?

onclick=showDetails(itemsvalues) 

This returns one value, but what if there was more than one item selected?

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

Thank you!

I have the following list that gets dynamically built and performs the same function as a select box would do.

<ul class="list-group" name="bobox1" id="bobox1">
<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>

When an item in the list is selected i user Jquery to append 'active' into the class to make 'list-group-item active'.

A user can select one or more list items from the list and click 'Show Details' which will give them details in a popup. This details popup is traggered by the onclick function in a button. My question is how do I use Jquery to get the values of one or more items in the list that a user has selected to pass via the onclick method?

onclick=showDetails(itemsvalues) 

This returns one value, but what if there was more than one item selected?

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

Thank you!

• javascript
• jquery

• LI elements don't have a value, but if you change it to data-value you could do $('.list-group-item.active').data('value') – adeneo Commented Nov 3, 2016 at 21:29

3 Answers 3

First of all use data-value for LI elements.
On LI click add some .active class
On button click get the data-value of the .active elements:

$("[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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" name="bobox1" id="bobox1">
  <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>

To recap <li value="bla" />huh</li> is invalid markup, so remember to first learn HTML before jumping into JS.

Use .map() to loop over all the elements that match a selector and get an array of the results.

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

.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" name="bobox1" id="bobox1">
  <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>

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

That will give you an array of all the active items. From there you can loop over them and grab the values.

$.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
});

Fiddle: https://jsfiddle/qc4y4102/1/