How to Set and Change Watermark at Runtime Using JavaScript

Introduction

I encountered the problem in my project of how to set and change a watermark during runtime in a single "text box" on the change event of a dropdown. I found various solutions on the internet but then I developed the following solution.

JavaScript code

$(document).ready(function()
{
$("#textBoxId").val("Enter Name");
ChangeWatermark('textBoxId', 'Enter Name');
});
function ChangeWatermark(inputId, watermarkText)
{
$("#" + inputId).unbind("focus");
$("#" + inputId).unbind("blur");
$("#" + inputId).bind("focus", function()
{
if (this.value == watermarkText) this.value = '';
});
$("#" + inputId).bind("blur", function()
{
if (this.value == '') this.value = watermarkText;
});
}
function ChangeWatermarkBasedOnDropdownChange()
{
switch ($("#DdlSelectSearch option[value='" + $("#DdlSelectSearch").val() + "']").text())
{
case "Name":
$("#textBoxId").val("Enter Name");
ChangeWatermark('textBoxId', 'Enter Name');
break;
case "Zip":
$("#textBoxId").val("Enter Zip");
ChangeWatermark('textBoxId', 'Enter Zip');
break;
case "City":
$("#textBoxId").val("Enter City");
ChangeWatermark('textBoxId', 'Enter City');
break;
case "MC Id":
$("#textBoxId").val("Enter MC Id");
ChangeWatermark('textBoxId', 'Enter MC Id');
break;
default:
}
}

HTML Code

<div class="row"> <span style="width: 50px;" class="normalGray">By:</span>
<asp:DropDownList ID="DdlSelectSearch" runat="server" Style="width: 63px; : 12px;" onchange="ChangeWatermarkBasedOnDropdownChange(); return false" CssClass="textBox floatLeft" ClientIDMode="Static" TabIndex="101">
<asp:ListItem Value="ZipCode">Zip</asp:ListItem>
<asp:ListItem Value="City">City</asp:ListItem>
<asp:ListItem Value="Name" selected="selected">Name</asp:ListItem>
<asp:ListItem Value="Id">MC Id</asp:ListItem>
</asp:DropDownList>
<input type="text" name="zip1" id="textBoxId" runat="server" maxlength="50" style="width: 93px;" class="textBox floatLeft marginLr5" clientidmode="Static" tabindex="102" />
</div>