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.
Watch Video of this Content on Video Steaming