Question

I have read existing questions however they do not seem to resolve my problem.
I would like to be able to hide the div “answer_wrapper” when the option “Open Ended” is selected for the drop down list.

I have written some code, however when I run the solution nothing appears to happen when selecting the “Open Ended” option in the drop down list.

Any help would be much appreciated.

$(function () 
{
    $("#QuestnType").change(function () 
    {
        ToggleDropdown();
    });
    ToggleDropdown(); 
});
function ToggleDropdown() 
{
    if ($("#QuestnType").val() == "Open Ended") 
    {
        $("#answer_wrapper").hide();
    }
    else 
    {
        $("#answer_wrapper").show();
    }
 };

The drop down list

<asp:DropDownList runat="server" ID="QuestnType" CssClass="form">
    <asp:ListItem Value="1">Check Boxes</asp:ListItem>
    <asp:ListItem Value="2">Drop Down</asp:ListItem>
    <asp:ListItem Value="3">Open Ended</asp:ListItem>
    <asp:ListItem Value="4">Radio Buttons</asp:ListItem>
</asp:DropDownList>
<div id="answer_wrapper">
    some code here
</div>

Where am I going wrong?

Answer 1

“Open Ended” is the text, the value value is 3

if ($("#QuestnType").val() == 3) ...

or

if ($("#QuestnType").text() == "Open Ended") ...

one other thing to note is that Server Ids != client Ids. if the drop down exists within another server control the client id becomes an ugly auto-generated webforms client id. either inject the client id into the jquery selector or use a unique class name to select the control.