CODEWITHSUNDEEP
jqueryhtmlcss
NoStressDeveloper
NoStressDeveloper

Reputation: 533

How to add class to dropdownlist using jquery depending on option

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

  });

Upvotes: 2

Views: 8708

Answers (3)

Franco
Franco

Reputation: 2329

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

Upvotes: 0

Donnie D'Amato
Donnie D'Amato

Reputation: 3940

Let's do it in one line.

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

Upvotes: 4

kevindeleon
kevindeleon

Reputation: 1924

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/

Upvotes: 1

Related Questions