How to pass multiple values from a list using JQuery

Question

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

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($('#combobox1 li.active').val());

Thank you!

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
– adeneo, Commented Nov 3, 2016 at 21:29

Roko C. Buljan · Accepted Answer · 2016-11-03 22:00:06Z

5

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

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

edited Nov 3, 2016 at 22:00

answered Nov 3, 2016 at 21:34

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barmar · Accepted Answer · 2016-11-03 21:39:08Z

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

Kolby · Accepted Answer · 2016-11-03 21:31:51Z

1

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.net/qc4y4102/1/

answered Nov 3, 2016 at 21:31

Kolby

2,8633 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to pass multiple values from a list using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related