Updating bootstrap button group buttons and pulling values

JavaScript
1

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 );
  
});
2

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.

3

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?

4

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.