Bootstrap dropdown item clicked, change button class using toggleClass Jquery

Question

Currently I have multiple buttons on my website, these components are using bootstrap. When each button is clicked, a drop-down appears with different priorities dependent on the button the user selects. I am trying to find a way to update the button class to match the priority selected.

For example priorities against bootstrap component class:

High priority is bootstrap class: btn btn-danger btn-sm dropdown-toggle
Medium priority is bootstrap class: btn btn-warning btn-sm dropdown-toggle
Low priority is bootstrap class: btn btn-success btn-sm dropdown-toggle
Service request priority is bootstrap class: btn btn-info btn-sm dropdown-toggle

HTML code:

    <div id="tableBody"><div class="btn-group"><button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">High</button>
  <div class="dropdown-menu"><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW"  class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Medium</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="LOW"  class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Low</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ServiceRequest</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW" 
      class="dropdown-item">Low</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">NoPriority</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW" 
      class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST"  class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">High</button>
  <div class="dropdown-menu"><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW"  class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Medium</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="LOW"  class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Low</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="SERVICEREQUEST" 
      class="dropdown-item">ServiceRequest</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-info btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ServiceRequest</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW" 
      class="dropdown-item">Low</a></div>
</div>

<div class="btn-group"><button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">NoPriority</button>
  <div class="dropdown-menu"><a datapriority="HIGH"  class="dropdown-item">High</a><a datapriority="MEDIUM"  class="dropdown-item">Medium</a><a datapriority="LOW" 
      class="dropdown-item">Low</a><a datapriority="SERVICEREQUEST"  class="dropdown-item">ServiceRequest</a></div>
</div></div>

Javascript:

        //update priority
$("#tableBody").on('click', '.dropdown-item', function(e) {
      var priority = $(this).attr("datapriority");
  console.log(priority);
    //issue I am having is below
    if (priority == "HIGH") {
      console.log("first: " + priority);
      object.toggleClass('btn btn-danger btn-sm dropdown-toggle');
    } else if (priority == "MEDIUM") {
      console.log("second: " + priority);
      object.toggleClass('btn btn-warning btn-sm dropdown-toggle');
    } else if (priority == "LOW") {
      console.log("third: " + priority);
      object.toggleClass('btn btn-success btn-sm dropdown-toggle');
    } else if (priority == "SERVICEREQUEST") {
      console.log("fourth: " + priority);
      object.toggleClass('btn btn-info btn-sm dropdown-toggle');
    }

});

CSS:

    @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

I also want to ensure the text on the button changes to represent what priority it is that was selected. Also I want to ensure only when one button is clicked, only that button should update not all buttons that match that class.

If the above is unclear I am happy to try explain with more details.

Example:

User clicks on first 'High' button which is currently the class bt button danger
User selects medium from the drop down
Button has now changed to the text 'Medium' and has the class 'btn btn-warning btn-sm dropdown-toggle' and should now have the drop down choices as 'High', 'Low' and 'Service Request'

Jfiddle also here: https://jsfiddle.net/Lohjzvqc/7/

Alexander Demichev Alexander Demichev · Accepted Answer · 2018-02-28T11:05:07

You can add some additional info to button (such as id) and to your dropdown options. For example:

<div class="btn-group">
<button id='btn' type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">High</button>
<ul class="dropdown-menu">
<li><a name="priority" data-priority="medium" class="dropdown-item">Medium</a></li>
<li><a name="priority" data-priority="low" class="dropdown-item">Low</a></li>
<li><a name="priority" data-priority="servicerequest" class="dropdown-item">ServiceRequest</a></li>

Then next script change button style and text by choosing option in select (it uses option text comparsion, so data-priority tag is unnecessary, but you can rewrite script to use it)

$('a[name=priority]').on('click',function() {
  const btn = $('#btn');
  const selectedPrior = $(this);
  switchPriority(btn, selectedPrior);
  switchBtnStyle(btn);
});

function switchPriority(currentPriorBtn, newPriorA){
    const btnText = currentPriorBtn.text();
  const aText = newPriorA.text();
  newPriorA.text(btnText);
  currentPriorBtn.text(aText);
}

function switchBtnStyle(btn){
    const btnText = btn.text();
  btn.removeClass();
  switch(btnText){
    case 'High':
    btn.addClass('btn btn-danger btn-sm dropdown-toggle');
    break;
    case 'Low':
    btn.addClass('btn btn-success btn-sm dropdown-toggle');
    break;
    case 'Medium':
    btn.addClass('btn btn-warning btn-sm dropdown-toggle');
    break;
    case 'ServiceRequest':
    btn.addClass('btn btn-info btn-sm dropdown-toggle');
    break;
  }
}

Fiddle here

Bootstrap dropdown item clicked, change button class using toggleClass Jquery

1 Answers