Karthik_SD
Karthik_SD

Reputation: 633

How to programmatically enable dropdown list element

I have 2 dropdown lists dl9 and dl10 as given below.
If I click yes from dl9 dl10 is made visible, else it is hidden.

Now I want to make selected value 'none' for dl10 when i click on 'no' and it's going to database; if yes only 'completed' and 'ongoing' must b made visible.

How can I do this?

<asp:DropDownList ID="DropDownList9" runat="server" Width="128px"  onchange="display()"  >
        <asp:ListItem Value="yes">Yes</asp:ListItem>
        <asp:ListItem Value="no">No</asp:ListItem>
    </asp:DropDownList>

<asp:DropDownList ID="DropDownList10" runat="server" Width="107px" TargetControlID="DropDownList9" >
        <asp:ListItem Value="completed">Completed</asp:ListItem>
        <asp:ListItem Value="ongoing">Ongoing</asp:ListItem>
        <asp:ListItem Selected="True" Value="none" Enabled="False">[SELECT]</asp:ListItem>
    </asp:DropDownList>

My Javascript to hide dl10 is:

<script type="text/javascript" language="javascript">
    function display()
     {
         if (document.getElementById('<%=DropDownList9.ClientID%>').value == "no") 
        {
            document.getElementById('d1').style.visibility = "hidden";
            document.getElementById('<%=DropDownList10.ClientID%>').style.visibility = "hidden";
            document.getElementById('<%=DropDownList10.ClientID%>').value = "none";
            //DropDownList10.SelectedValue = "none";   not wrkin
        }
        else {
            document.getElementById('<%=DropDownList10.ClientID%>').style.visibility = "visible";
            document.getElementById('d1').style.visibility = "visible";
        }
    }
 </script>

My problem here is: When I click 'no' and submit 'completed' is going into database....but i need 'none' to be entered...

Upvotes: 2

Views: 1822

Answers (3)

Tadit Dash
Tadit Dash

Reputation: 305

Enabled="False" property in the ListItem is creating problem.

<asp:ListItem Selected="True" Value="none" Enabled="False">[SELECT]</asp:ListItem>

I removed and checked, it is working fine.

[Update]

If you want to hide the option, then hide that while loading of page by javaScript. Write this code inside script tags and it will hide the option.

window.onload = function () {
     document.getElementById('<%=DropDownList10.ClientID%>').options[2].style.display = "none";
};

[/Update]

Upvotes: 4

Boss
Boss

Reputation: 475

document.getElementById('<%=DropDownList10.ClientID%>').val("none").attr("selected", "selected");

Upvotes: 0

Hache
Hache

Reputation: 449

You have to add an element with value none

Upvotes: 1

Related Questions