Solved

display div if selected item in dropdown

Posted on 2013-01-18

2 solutions

674 Views

Last Modified: 2013-01-18

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

Comment

Question by:runnerjp2005

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

2 Comments

LVL 82

Accepted Solution

by:leakim971

leakim971 earned 500 total points

ID: 387926662013-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 82

Assisted Solution

by:leakim971

leakim971 earned 500 total points

ID: 387926782013-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

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Simple animation using JQuery

Article by: Julian

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…

jQuery

A jQuery Progress Bar

Article by: Ray

Introduction A frequently asked question goes something like this: "I am running a long process in the background and I want to alert my client when the process finishes. How can I send a message to the browser?" Unfortunately, the short answer…

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…