CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bakajuice
Bakajuice

Reputation: 173

Html Default Select Option - Different Color - Doesn't Work On Current Jquery

I'd like to have a select field with a default option, which is not intended as a selection, be gray/faded out, while the other selectable options be black. I've tried jquery but it doesn't seem to work on my site, the problem seems to lie with jquery no longer supporting the implemetation. In the jsfiddle link below it works as it should, but only up to 1.72. How do I support/implement this. Thank you for any and all help!

Jquery Implementation

jQuery(document).ready(function($) {       
  function colorgray() {
    if($(this).val() == "0") $(this).addClass("empty");
      else $(this).removeClass("empty");
  }
     $("select.loan-type").change(colorgray);

$("select.loan-type").change();
     $("select.loan").change(colorgray);

$("select.loan").change();
});

JSfiddle Example

Upvotes: 0

Views: 74

Answers (2)

EricBellDesigns
EricBellDesigns

Reputation: 965

Here's a JSFiddle that does what you're after:

http://jsfiddle.net/Zmf6t/1863/

if($("select option:selected").val() == "0")
{
    $(".loan-type").css("color", "gray");  
}

//Change color to black after selecting
$(".loan-type").change(function(){
   $(".loan-type").css("color", "black"); 
});

Upvotes: 1

Paul Byrne
Paul Byrne

Reputation: 1615

The class empty is applied, but then it is is removed again when you call $("select.loan").change(); again.

Leaving this line out of your code appears to result in the correct effect.

jQuery(document).ready(function($) {       
  function colorgray() {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty");
  }
  $("select.loan-type").change(colorgray);


  $("select.loan").change(colorgray);

});

Upvotes: 2

Related Questions