How to add class to dropdownlist using jquery depending on option

Question

I want to add css class dropdownliststyle to dropdown only when "please select" is selected on focus.how do i do that?

here is my jsfiddle link https://jsfiddle.net/3dj3srxp/ to that

CSS

 .DropDownStyle {
   background-color: red;
   color: white;
 }

jquery

$(document).ready(function() {
    $('input[type="text"]').each(function() {
      $(this).focus(function() {
        $(this).addClass('textBoxStyle');
      });

      $(this).blur(function() {
        $(this).removeClass('textBoxStyle');
      });
    });

    $('select').focus(function() {
        $(this).addClass('DropDownStyle');
    });

    $('select').blur(function() {
        $(this).removeClass('DropDownStyle');
      });

  });

See my updated answer...it would be better to use the 'change' function, and check the value... I have a update to your fiddle in my answer. — kevindeleon
– kevindeleon, Commented Dec 21, 2015 at 23:58

Donnie D'Amato · Accepted Answer · 2015-12-22 02:11:18Z

4

Let's do it in one line.

$('select').on('change', function(){
    $(this).toggleClass('DropDownStyle', $(this).val() == 'select');
});

edited Dec 22, 2015 at 2:11

answered Dec 22, 2015 at 1:49

Donnie D'Amato

3,9701 gold badge20 silver badges42 bronze badges

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

1 Comment

NoStressDeveloper Over a year ago

wish i can mark more than one solution as answer. different way of doing it.good to know. Thanks

kevindeleon · Accepted Answer · 2015-12-21 23:55:53Z

1

You need to add an if statement to check for the value, and it would actually be better to use the change function:

$('select').change(function() {
  if ($(this).val() == "select") {
    $(this).addClass('DropDownStyle');
  } else {
    $(this).removeClass('DropDownStyle');
  }
 });

You can see the fiddle here: https://jsfiddle.net/3dj3srxp/3/

edited Dec 21, 2015 at 23:55

answered Dec 21, 2015 at 23:49

kevindeleon

1,9243 gold badges18 silver badges30 bronze badges

Comments

Abhishek Pandey · Accepted Answer · 2017-04-14 05:33:10Z

0

The focus applies only to input elements if you want to change the color of the select box maybe you will use the 'change' event:

$('select').on('change',function() {
   $(this).removeClass('DropDownStyle');

   if($(this).val() == 'select'){
     $(this).addClass('DropDownStyle');
   }
});

edited Apr 14, 2017 at 5:33

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

answered Dec 21, 2015 at 23:49

Franco

2,3291 gold badge13 silver badges18 bronze badges

1 Comment

Franco Over a year ago

The reason for that is that kevindeleon has changed something in your HTML after I posted my answer. So I had to update my answer again. If you are doing this as validation I will advise you to check for the inserted values when the user submit the form and avoid posting the form if something goes wrong. Cheers :)

Collectives™ on Stack Overflow

How to add class to dropdownlist using jquery depending on option

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related