Make Placeholder For A Select Box

Make Placeholder For A Select Box

Here we consider how to Make Placeholder For A Select Box. We have to use CSS and Jquery for making placeholder for Select Box.





Make Placeholder For A Select Box - Step 1


In Css region, you can write following style.

#SelectID option
{
        color: black;
}
.placeHolder
{
        color: gray;
}



Here SelectID is the ID of Select Box.
placeHolder is the class that will be applied for Select Box.


Make Placeholder For A Select Box - Step 2


On Script part, we have to add following code.

$(function () {
         $("#SelectID").change(function () {
                if ($(this).val() == "0") {
                $(this).addClass("placeHolder");
                }
                 else {
                 $(this).removeClass("placeHolder")
                }
        });
         $("#SelectID").change();
})



On page load we would add the class placeHolder to the first item. Here we listen the change event for Select Box. If the SelectedIndex is Zero, then we append class placeHolder to the Selected Item. Else the Class placeHolder will be removed. Now run your application, you will see a placeholder on Select Box.