Updating bootstrap button group buttons and pulling values

I’ve got 3 bootstrap button groups each with drop down menus. I need to change the value of the button when user makes a selection (this part I have working) and I need to check each of the other two buttons and pull their values.
Here is a codepen

Here is my html

<section class="select-talent border-top border-bottom pt30 pb30">
  <div class="container">
    <div class="row" style="margin-bottom: 40px;">
      <div class="col-xs-12">
        <h3 class="">FILTER TALENT</h3>
      </div><!-- close col -->
    </div><!-- close row -->

    <div class="row mt20">
      <div class="col-sm-12 col-md-4 ">
        <!-- Single button -->
        <div class="btn-group wide dropdown">
          <button type="button" class="btn btn-default btn-lg wide dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Experience Level <span class="caret pull-right"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a data-levelID="1">Level 1 and above</a></li>
            <li><a data-levelID="2">Level 2 and above</a></li>
            <li><a data-levelID="3">Level 3 and above</a></li>
            <li><a data-levelID="4">Level 4 and above</a></li>
            <li><a data-levelID="5">Level 5</a></li>
          </ul>
        </div><!-- close btn-group -->
      </div><!-- close col -->

      <div class="col-sm-12 col-md-4">
        <!-- Single button -->
        <div class="btn-group wide dropdown">
          <button type="button" class="btn btn-default  btn-lg wide dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Salon / Location <span class="caret  pull-right"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a data-locationID="1">Location 1</a></li>
            <li><a data-locationID="2">Location 2</a></li>
            <li><a data-locationID="3">Location 3</a></li>
          </ul>
        </div><!-- close btn-group -->
      </div><!-- close col -->

      <div class="col-sm-12 col-md-4">
        <!-- Single button -->
        <div class="btn-group wide dropdown">
          <button type="button" class="btn btn-default btn-lg wide dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Specialization <span class="caret  pull-right"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a data-specialtyID="1">Specialty 1</a></li>
            <li><a data-specialtyID="2" >Specialty 2</a></li>
            <li><a data-specialtyID="3" >Specialty 3</a></li>
            <li><a data-specialtyID="4" >Specialty 4</a></li>
          </ul>
        </div><!-- close btn-group -->
      </div><!-- close col -->

      <div class="col-sm-12 col-md-12">
        <p class="text-right mt10"><a class="green" href="#">RESET FILTERS <i class="fas fa-chevron-right"></i></a></p>
      </div><!-- close col -->
    </div><!-- close row -->
  </div><!-- close container -->
</section>

here is my js so far…

$(".dropdown-menu li a").click(function(){
  //change html value of dropdown changed
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  
  //check if Experience Level has selection
 
  //get data-levelID of Experience Level dropdown 
  var levelID = $(this).parents(".dropdown").find('.btn').val($(this).data('levelID'));
  
  //check if Location has selection
     // return false or 0 if not
  //get data-locationID of Experience Level dropdown 
  var locationID = $(this).parents(".dropdown").find('.btn').val($(this).data('locationID'));
  
  //check if Specialization has selection
      // return false or 0 if not
  //get data-specialtyID of Experience Level dropdown 
  var specialtyID = $(this).parents(".dropdown").find('.btn').val($(this).data('specialtyID'));
  
  // save all variables
  var allSelection = "levelID: " + levelID + " locationID: " + locationID + "specialtyID: " +specialtyID ;
  
  alert (allSelection );
  
});

Hi @aaron4osu, first of all I’d suggest to use generic data attributes instead of specific ones for each filter, like e.g. data-filter and data-value:

<ul class="dropdown-menu">
  <li><a data-filter="level" data-value="1">Level 1 and above</a></li>
  <li><a data-filter="level" data-value="2">Level 2 and above</a></li>
  <li><a data-filter="level" data-value="3">Level 3 and above</a></li>
  <li><a data-filter="level" data-value="4">Level 4 and above</a></li>
  <li><a data-filter="level" data-value="5">Level 5</a></li>
</ul>
...
<ul class="dropdown-menu">
  <li><a data-filter="location" data-value="1">Location 1</a></li>
  <li><a data-filter="location" data-value="2">Location 2</a></li>
  <li><a data-filter="location" data-value="3">Location 3</a></li>
</ul>

You might then add a checked class or the like to remember the currently selected filter, and use the data attributes as key / value pairs to assemble a filter object:

function getFilters () {
  var filters = {}
  
  $('.checked').each(function () {
    filters[this.dataset.filter] = this.dataset.value
  })
  
  return filters
}

$(".dropdown-menu li a").click(function () {
  var $this = $(this)
  var $dropdown = $this.parents('.dropdown')
  var html = $this.text() + ' <span class="caret"></span>'
  
  $dropdown.find(".btn").html(html)  
  $dropdown.find('a').removeClass('checked')
  $this.addClass('checked')

  console.log(getFilters())
})

This has the additional advantage that your JS is agnostic regarding the filters used in your markup, and you don’t have to account for each separately – here’s an updated pen.

Nice. Thanks for the help. That looks much more efficient than where I was going. I’m terrible dealing with arrays. Can you show me how to grab each of those value pairs and save them as individual variables?

Actually it’s not an array but a plain object; you can directly access its properties using the dot notation like so:

var filters = getFilters()

console.log(filters.level)
console.log(filters.location)

So you probably won’t need individual variables. Or if you need to convert it back to an array of key / value pairs for iteration, you can use Object.entries():

// This will give you something like
// [['level', '4'], ['location', '2']]
console.log(Object.entries(filters))