Status: Solved
Priority: Medium
Security: Public
Views: 691
Last Modified: 2013-01-18

display div if selected item in dropdown

Hello,

I have tried to run this code to try display the div if Session is selected
But no matter what's selected it always shows the "#answer_wrapper" div

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery("#Type").change(function () {
    var id = jQuery(this).find("option:selected").attr("value");
    if (id == "Session") {
        jQuery("#answer_wrapper").show();
    }
    else {
        jQuery("#answer_wrapper").hide();
    }
});
</script> 
<asp:DropDownList ID="Type" runat="server">
              <asp:ListItem Value="SteadyRun">Steady Run</asp:ListItem>
              <asp:ListItem Value="EasyRun">Easy Run</asp:ListItem>
              <asp:ListItem Value="LongRun">Long Run</asp:ListItem>
              <asp:ListItem Value="Session">Session</asp:ListItem>
    </asp:DropDownList>
<div id="answer_wrapper">
    some code here
</div>

Open in new window

runnerjp2005

Asked: 2013-01-18

Advertise Here

2 Solutions

LVL 83

leakim971PluritechnicianCommented: 2013-01-18

you need to wait DOM ready before to play with the object inside
test page : http://jsfiddle.net/m5UxK/
jQuery(document).ready(function() {

jQuery("#Type").change(function () {
var id = jQuery(this).find("option:selected").attr("value");
if (id == "Session") {
jQuery("#answer_wrapper").show();
}
else {
jQuery("#answer_wrapper").hide();
}
});

})

LVL 83

leakim971PluritechnicianCommented: 2013-01-18

another one to fire the event at page load : http://jsfiddle.net/m5UxK/1/

    jQuery(document).ready(function() {
        jQuery("#Type").change(function () {
            var id = jQuery(this).find("option:selected").attr("value");
            if (id == "Session") {
                jQuery("#answer_wrapper").show();
            }
            else {
                jQuery("#answer_wrapper").hide();
            }
        }).change();
    })

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

display div if selected item in dropdown

Join & Write a Comment Already a member? Login.

Featured Post