如何使用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'); 
});