• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 691
  • Last Modified:

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

0
runnerjp2005
Asked:
runnerjp2005
  • 2
2 Solutions
 
leakim971PluritechnicianCommented:
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();
    }
});


})
0
 
leakim971PluritechnicianCommented:
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

0
Question has a verified solution.

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

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now