如何使用jquery添加类到dropdownlist取决于选项

Question

我只想在focus.how上选择“请选择”时，才将css class dropdownliststyle添加到下拉菜单中吗？

，这里是我的jsfiddle链接https://jsfiddle.net/3dj3srxp/到

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

    }); 

Answer 1

您需要添加一个if语句来检查的值，它实际上会更好地使用更改功能：

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

你可以在这里看到小提琴：https://jsfiddle.net/3dj3srxp/3/

Answer 2

重点仅适用于输入要素，如果你想改变选择框的颜色也许你会用“变”事件：

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

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

Answer 3

让我们一行完成。

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