How do I hide list item based on the selection of dropdownlist using jquery ?

Question

0.00/5 (No votes)

See more:

First of all user select one item from drop down list and then click start.
After that it will load one div which is below it and which contain 6 tabs and hide the first div .
Now what I am trying to do is:- based on the selected item of dropdownlist number of tabs should display but not getting the expected output. I can't figure out why. Have a look at my code.Any help would be greatly appreciated
.

What I have tried:

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Practice.aspx.cs" Inherits="Student_Practice" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <title></title>

    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#ddlCourse").change(function () {
            var selectedText = $(this).find("ListItem:selected").text();
            if (selectedText == MCA) {
                $("#t1").show();
                $("#t2").show();
                $("#t3").show();
                $("#t4").hide();
                $("#t5").hide();
                $("#t6").hide();
            }
        });
    });

    </script>
</head>
<body>
    <form id="form1"  runat="server">
    <div id="first"  runat="server">

        <asp:DropDownList ID="ddlCourse" runat="server" AutoPostBack = "true"
             OnSelectedIndexChanged="ddlCourse_SelectedIndexChanged">
            <asp:ListItem Text = "--Select Course--" Value = ""></asp:ListItem>
        </asp:DropDownList>

        <br />
        <br />
        <asp:DropDownList ID="ddlExam" runat="server" AutoPostBack = "true"
Enabled = "false"  >
            <asp:ListItem Text = "--Select Exam--" Value = ""></asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="start" OnClick="Button1_Click" />
        <br />
        <br />
        <br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>

        <div id="second"  runat="server">

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    var selected_tab = 1;
    $(function () {
        var tabs = $("#tabs").tabs({
            select: function (e, i) {
                selected_tab = i.index;
            }
        });
        selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
        tabs.tabs('select', selected_tab);
        $("form").submit(function () {
            $("[id$=selected_tab]").val(selected_tab);
        });
    });
    
</script>
<div id="tabs">
    <ul>
        <li id="t1"><a href="#tabs-1">Tab 1</a></li>
        <li id="t2"><a href="#tabs-2">Tab 2</a></li>
        <li id="t3"><a href="#tabs-3">Tab 3</a></li>
        <li id="t4"><a href="#tabs-4">Tab 4</a></li>
        <li id="t5"><a href="#tabs-5">Tab 5</a></li>
        <li id="t6"><a href="#tabs-6">Tab 6</a></li>
    </ul>
    <div id="tabs-1">
        Content 1
    </div>
    <div id="tabs-2">
        Content 2
    </div>
    <div id="tabs-3">
        Content 3
    </div>
    <div id="tabs-4">
        Content 4
    </div>
    <div id="tabs-5">
        Content 5
    </div>
    <div id="tabs-6">
        Content 6
    </div>
</div>
<asp:HiddenField ID="selected_tab" runat="server" />
<asp:Button ID="Button2" runat="server" Text="Do PostBack" OnClick="Button2_Click" />

        </div>
    </form>
</body>
</html>

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;


public partial class Student_Practice : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        second.Visible = false;

        if (!IsPostBack)
        {
            ddlCourse.AppendDataBoundItems = true;
            String strConnString = ConfigurationManager
                .ConnectionStrings["ConnectionString"].ConnectionString;
            String strQuery = "select * from Course";
            SqlConnection con = new SqlConnection(strConnString);
            SqlCommand cmd = new SqlCommand();
            cmd.CommandType = CommandType.Text;
            cmd.CommandText = strQuery;
            cmd.Connection = con;
            try
            {
                con.Open();
                ddlCourse.DataSource = cmd.ExecuteReader();
                ddlCourse.DataTextField = "CourseName";
                ddlCourse.DataValueField = "CourseId";
                ddlCourse.DataBind();
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                con.Close();
                con.Dispose();
            }
        }
    }

    protected void ddlCourse_SelectedIndexChanged(object sender, EventArgs e)
    {
        ddlExam.Items.Clear();
        ddlExam.Items.Add(new ListItem("--Select Exam--", ""));
        

        ddlExam.AppendDataBoundItems = true;
        String strConnString = ConfigurationManager
            .ConnectionStrings["ConnectionString"].ConnectionString;
        String strQuery = "select ExamId, ExamName from Exam " +
                           "where CourseId=@CourseId";
        SqlConnection con = new SqlConnection(strConnString);
        SqlCommand cmd = new SqlCommand();
        cmd.Parameters.AddWithValue("@CourseId",
            ddlCourse.SelectedItem.Value);
        cmd.CommandType = CommandType.Text;
        cmd.CommandText = strQuery;
        cmd.Connection = con;
        try
        {
            con.Open();
            ddlExam.DataSource = cmd.ExecuteReader();
            ddlExam.DataTextField = "ExamName";
            ddlExam.DataValueField = "ExamId";
            ddlExam.DataBind();
            if (ddlExam.Items.Count > 1)
            {
                ddlExam.Enabled = true;
            }
            else
            {
                ddlExam.Enabled = false;
                
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
            con.Close();
            con.Dispose();
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        first.Visible = false;
        second.Visible = true;
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        selected_tab.Value = Request.Form[selected_tab.UniqueID];
    }
}

Posted 13-Apr-16 23:29pm

Member 12170781

Updated 14-Apr-16 1:15am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nathan Minier · Answer 1 · 2016-04-14T01:15:00

EDIT:

Okay, so after reviewing the problem more the issue is that you're handling events on the client and in code behind, which means that you're client-side handlers are cleared because the page performs a post-back. Your code is more targeted towards a stateful postback rather than a stateless AJAX setup, so in that light we'll move the logic to the code-behind.

First, clear out the script block in the head, it will not help you with anything. We're going to put it's login into ddlCourse_SelectedIndexChanged().

Next, we're going to edit ddlCourse_SelectedIndexChanged():

C#

protected void ddlCourse_SelectedIndexChanged(object sender, EventArgs e)
{
   if(ddlCourse.DataTextField == "MCA")
   {
      t1.Visible = true;
      t2.Visible = true;
      t3.Visible = true;
      t4.Visible = false;
      t5.Visible = false;
      t6.Visible = false;
   }
...
}

Last, modify your HTML so that the tags are rendered by the server:

ASP.NET

<li id="t1"  runat="server"><a href="#tabs-1">Tab 1</a></li>
<li id="t2"  runat="server"><a href="#tabs-2">Tab 2</a></li>
<li id="t3"  runat="server"><a href="#tabs-3">Tab 3</a></li>
<li id="t4"  runat="server"><a href="#tabs-4">Tab 4</a></li>
<li id="t5"  runat="server"><a href="#tabs-5">Tab 5</a></li>
<li id="t6"  runat="server"><a href="#tabs-6">Tab 6</a></li>