<link href="Content/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$("#<%=ddlCName.ClientID%>").select2({
placeholder: "Choose One",
allowClear: true
});
});
</script>
<div class="col-md-3">
<asp:DropDownList ID="ddlCName" CssClass="form-control input-sm" runat="server" Height="33px" Width="250px" DataSourceID="SqlDataSource1" DataTextField="CName" DataValueField="CName">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnection %>" SelectCommand="SELECT [CName] FROM [CustomerRegister] ORDER BY [CName]"></asp:SqlDataSource>
</div>