如何根据使用jquery选择下拉列表隐藏列表项？ [英] How do I hide list item based on the selection of dropdownlist using jquery ?
本文介绍了如何根据使用jquery选择下拉列表隐藏列表项？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
首先，用户从下拉列表中选择一项，然后单击开始。
之后，它将加载一个位于其下方的div，其中包含6个选项卡并隐藏第一个div。
现在我要做的是： - 根据所选项目的下拉列表，应显示多少个选项卡但不能获得预期的输出。我无法弄清楚为什么。看看我的代码。非常感谢任何帮助
。
我尝试过：
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:
<%@ 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>
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];
}
}推荐答案
(function () {
(\"#ddlCourse\").change(function () {
var selectedText =
("#ddlCourse").change(function () { var selectedText =
(this).find(\"ListItem:selected\").text();
if (selectedText == MCA) {
(this).find("ListItem:selected").text(); if (selectedText == MCA) {
这篇关于如何根据使用jquery选择下拉列表隐藏列表项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
