CODEWITHSUNDEEP
c#asp.netdrop-down-menu
amit
amit

Reputation: 449

How to add placeholder in dropdown list c#

Hi I have dropdown list code I want to add placeholder there how I can add?

<asp:DropDownList id="ddlyear" runat="server" >
                     <asp:ListItem >Experience</asp:ListItem>
                     <asp:ListItem>Fresher</asp:ListItem>
                     <asp:ListItem>1</asp:ListItem>
                     <asp:ListItem>2</asp:ListItem>
                     <asp:ListItem>3</asp:ListItem>
</asp:DropDownList>

I want to show like this enter image description here

Upvotes: 4

Views: 33362

Answers (4)

II ARROWS
II ARROWS

Reputation: 518

You can just do this:

    <asp:DropDownList id="ddlyear" runat="server" >
                     <asp:ListItem selected hidden>Experience</asp:ListItem>
                     <asp:ListItem>Fresher</asp:ListItem>
                     <asp:ListItem>1</asp:ListItem>
                     <asp:ListItem>2</asp:ListItem>
                     <asp:ListItem>3</asp:ListItem>
    </asp:DropDownList>

The selected makes it the default, while hidden prevents it to be visible on the expanded list.

It's the simplest way possible.

Upvotes: 7

Peter B
Peter B

Reputation: 24137

In many cases it would be acceptable to have an empty or dummy item as the first item. 'Empty' means that the value is empty, the text can be anything you want.

So like this:

<asp:DropDownList id="ddlyear" runat="server">
    <asp:ListItem Value="">Select</asp:ListItem>
    <asp:ListItem Value="Experience">Experience</asp:ListItem>
    <asp:ListItem Value="Fresher">Fresher</asp:ListItem>
    <asp:ListItem Value="1">1</asp:ListItem>
    <asp:ListItem Value="2">2</asp:ListItem>
    <asp:ListItem Value="3">3</asp:ListItem>
</asp:DropDownList>

Upvotes: 0

Mridul Koul
Mridul Koul

Reputation: 120

@amit

Brother try this....

<select placeholder="select your beverage">
<option value="" default="" selected="">select your beverage</option>
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
<option value="soda">Soda</option>
</select>

Upvotes: 1

DevEstacion
DevEstacion

Reputation: 1967

You can't do it on HTML alone, you'd need Html + jQuery to achieve this.

<asp:DropDownList ID="ddlyear" runat="server">
    <asp:ListItem>Experience</asp:ListItem>
    <asp:ListItem>Fresher</asp:ListItem>
    <asp:ListItem>1</asp:ListItem>
    <asp:ListItem>2</asp:ListItem>
    <asp:ListItem>3</asp:ListItem>
</asp:DropDownList>

After this, you need your jQuery to do the magic by removing and re attaching your placeholder.

<script>
var isChanged = false;
$(function () {
    $('#ddlyear').focusin(function () {
        if (!isChanged) {
// this removes the first item which is your placeholder if it is never changed
            $(this).find('option:first').remove();
        }
    });
    $('#ddlyear').change(function () {
// this marks the selection to have changed
        isChanged = true;
    });
    $('#ddlyear').focusout(function () {
        if (!isChanged) {
// if the control loses focus and there is no change in selection, return the first item
            $(this).prepend('<option selected="selected" value="0">Experience</option>');
        }
    });
});
</script>

Take note that you need jQuery to use this, just install it as a nuget package or download it manually and add a declaration in your aspx.

<head runat="server">
    <title></title>
// Sample only, you can place it in any location or use any version
    <script src="../scripts/jquery-2.2.2.min.js"></script>
</head>

Upvotes: 3

Related Questions