Modify the class of the <select> element when it has been clicked or altered using JavaScript or jQuery

Question

Modify the class of the <select> element when it has been clicked or altered using JavaScript or jQuery

There is a select element styled as a dropdown list using bootstrap-select. I am interested in adding a specific class with CSS when the select is clicked or changed.

https://i.sstatic.net/fbdK4.png

  <select required class="form-control selectpicker" title="shipping">
      <option>Standard</option>
      <option>Express</option>
      <option>...</option>
  <select>

I would like to apply my class solely to this select element - changing its color to green if there is a change, and to red if it was only clicked without any modifications.

You can find the code on this link.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

To implement the desired functionality in your JavaScript, include this code:

$('.selectpicker').on('changed.bs.select', function (e) {
   $(this).closest('.bootstrap-select').addClass("checked");
});

When the selectpicker is changed, the specified class will be added to the select box.
Remember to update your CSS with the following:

.bootstrap-select.checked > .dropdown-toggle > span {
  color: red
}

Don't forget to check out the updated fiddle here.

Answer 2

To implement the desired functionality in your JavaScript, include this code:

$('.selectpicker').on('changed.bs.select', function (e) {
   $(this).closest('.bootstrap-select').addClass("checked");
});

When the selectpicker is changed, the specified class will be added to the select box.
Remember to update your CSS with the following:

.bootstrap-select.checked > .dropdown-toggle > span {
  color: red
}

Don't forget to check out the updated fiddle here.

Answer 3

Answer №2

Utilize the event known as: changed.bs.select

// whenever a change occurs, this function will be executed
$('.selectpicker').on('changed.bs.select', function (e) {
 var value = $(this).val();
 // add your conditions here...
});

Answer 4

Utilize the event known as: changed.bs.select

// whenever a change occurs, this function will be executed
$('.selectpicker').on('changed.bs.select', function (e) {
 var value = $(this).val();
 // add your conditions here...
});

Modify the class of the <select> element when it has been clicked or altered using JavaScript or jQuery

Answer №1

Answer №2

Similar questions

Ways to include the name of the parent element in a child element

Issues with integrating VUE frontend with PHP backend and API

What methods are available to create distinctive, shareable links akin to those utilized by Zoom and Google Hangouts?

The location of the CHROMEDRIVER for Node.js with Selenium

Dealing with the MethodNotAllowedHttpException issue while implementing AJAX in Laravel 5

Issue with Flask and JS: Syntax error detected - Unexpected token '<'

What is the best way to align a button directly beside an input field using Bootstrap's columns and grid system?

Controlling the visibility of HTML elements in ASP.NET

Mastering the CSS Art of Working with Sprite Images and Their Positioning

To retrieve data from an AJAX response, you will receive an array in the form of a string

Extracting data from tag definitions using Beautiful Soup

Workaround for Google Chrome Session Cookie Functionality

What is the best way to exclude all elements in the array that do not match this specific

Comparing $.fn.fancybox and $.fancybox: What sets them apart?

Is there a way for me to recreate the appearance of the outline and labeling found in Material-UI's outlined textfield?

Inject Angularjs Controller into Module Once DOM is Initialized: Tips and Tricks

What steps do I need to take to make this JavaScript code function properly? How can I create a carbon copy email setup in

Place the button inside the form following another block element

What is the Ideal Placement for the MuiThemeProvider Component?

Attempting to implement CSS onto jQuery slideToggle upon the clicking of links