JQuery和ASP.NET分别实现级联下拉框效果

在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现，现在学习了JQuery，知道了JQuery和select也能实现。我分别举两个小例子说明这两种方法如何实现.

1.用JQuery和select来实现汽车厂商和汽车类型的联动

效果图：

     

逻辑分析图：

html代码：

[html] view plain copy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>级联下拉框效果</title>
  6. <link rel="stylesheet" type="text/css" href="css/chainselect.css">
  7. <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
  8. <script language="javascript" type="text/javascript" src="js/chainselect.js"></script>
  9. </head>
  10. <body>
  11. <div class="car">
  12. <span class="carname">
  13. 汽车厂商：
  14. <select>
  15. <option value="">请选择汽车厂商</option>
  16. <option value="BMW">宝马</option>
  17. <option value="Audi">奥迪</option>
  18. <option value="VW">大众</option>
  19. </select>
  20. <img src="images/pfeil.gif" alt="有数据"/>
  21. </span>
  22. <span class="cartype">
  23. 汽车类型：
  24. <select></select>
  25. </span>
  26. </div>
  27. </body>
  28. </html>

css代码：

[plain] view plain copy

  1. .car {
  2. text-align:center;
  3. }
  4. .cartype{
  5. display:none;
  6. }

js代码：

[javascript] view plain copy

  1. $(document).ready(function(){
  2. //找到下拉框
  3. var carnameSelect = $(".carname").children("select");
  4. var cartypeSelect = $(".cartype").children("select");
  5. //给下拉框注册事件
  6. carnameSelect.change(function(){
  7. var carnameValue = $(this).val();
  8. if( carnameValue != ""){
  9. //carnameValue不为空的情况接着判断
  10. if(!carnameSelect.data(carnameValue)){
  11. //不在缓冲区中,需要向服务器请求
  12. $.post("ChainSelect",{keyword:carnameValue,type:"top"},function(data){
  13. if (data.length != 0){
  14. //返回的数据不为空
  15. cartypeSelect.html("");
  16. $("<option value=‘‘>请选择汽车类型</option>").appendTo(cartypeSelect);
  17. for(var i = 0;i < data.length; i++ ){
  18. $("<option value =‘ " + data[i] + " ‘> "+ data[i] +"</option>").appendTo(cartypeSelect);
  19. }
  20. cartypeSelect.parent().show();
  21. carnameSelect.next().show();
  22. }else{
  23. //返回的数据为空
  24. cartypeSelect.parent().hide();
  25. carnameSelect.next().hide();
  26. }
  27. carnameSelect.data(carnameValue,data);
  28. },"json");
  29. }else{
  30. //在缓冲区中
  31. var data = carnameSelect.data(carnameValue);
  32. if (data.length != 0){
  33. //返回的数据不为空
  34. cartypeSelect.html("");
  35. $("<option value=‘‘>请选择汽车类型</option>").appendTo(cartypeSelect);
  36. for(var i = 0;i < data.length; i++ ){
  37. $("<option value =‘ " + data[i] + " ‘> "+ data[i] +"</option>").appendTo(cartypeSelect);
  38. }
  39. cartypeSelect.parent().show();
  40. carnameSelect.next().show();
  41. }else{
  42. //返回的数据为空
  43. cartypeSelect.parent().hide();
  44. carnameSelect.next().hide();
  45. }
  46. }
  47. }else{
  48. //carnameValue为空的情况，隐藏第二个下拉框
  49. cartypeSelect.parent().hide();
  50. carnameSelect.next().hide();
  51. }
  52. });
  53. });

2.用ASP.NET控件实现部门和员工的联动

效果图：

     
     

Default.aspx代码：

[plain] view plain copy

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <div>
  11. <asp:DropDownList ID="ddlDep" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlDep_SelectedIndexChanged">
  12. </asp:DropDownList>
  13. <br />
  14. <asp:ListBox ID="lBoxEmp" runat="server"></asp:ListBox>
  15. </div>
  16. </form>
  17. </body>
  18. </html>

Default.aspx.cs代码：

[csharp] view plain copy

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data.SqlClient;
  8. public partial class _Default : System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e)
  11. {
  12. if (!this.IsPostBack)
  13. {
  14. SqlConnection con = DBCon.createConnection();
  15. con.Open();
  16. //显示部门
  17. SqlCommand cmd = new SqlCommand("select * from Tdepartment", con);
  18. SqlDataReader sdr = cmd.ExecuteReader();
  19. this.ddlDep.DataSource = sdr;
  20. this.ddlDep.DataTextField = "depName";
  21. this.ddlDep.DataValueField = "depID";
  22. this.ddlDep.DataBind();
  23. sdr.Close();
  24. //显示员工
  25. SqlCommand cmdEmp =new SqlCommand ("select * from emp where depID=" + this.ddlDep .SelectedValue ,con);
  26. SqlDataReader sdrEmp = cmdEmp.ExecuteReader();
  27. while (sdrEmp.Read())
  28. {
  29. this.lBoxEmp.Items.Add (new ListItem(sdrEmp.GetString(1),sdrEmp .GetInt32 (0).ToString ()));
  30. }
  31. sdrEmp.Close();
  32. //关闭连接
  33. con.Close();
  34. }
  35. }
  36. protected void ddlDep_SelectedIndexChanged(object sender, EventArgs e)
  37. {
  38. this.lBoxEmp.Items.Clear();
  39. SqlConnection con = DBCon.createConnection();
  40. con.Open();
  41. SqlCommand cmdEmp = new SqlCommand("select * from emp where depID=" + this.ddlDep.SelectedValue, con);
  42. SqlDataReader sdrEmp = cmdEmp.ExecuteReader();
  43. while (sdrEmp.Read())
  44. {
  45. this.lBoxEmp.Items.Add(new ListItem(sdrEmp.GetString(1), sdrEmp.GetInt32(0).ToString()));
  46. }
  47. sdrEmp.Close();
  48. //关闭连接
  49. con.Close();
  50. }
  51. }

DBCon.cs代码

[csharp] view plain copy

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Data.SqlClient;
  6. /// <summary>
  7. /// DBCon 的摘要说明
  8. /// </summary>
  9. public class DBCon
  10. {
  11. public DBCon()
  12. {
  13. //
  14. // TODO: 在此处添加构造函数逻辑
  15. //
  16. }
  17. public static SqlConnection createConnection()
  18. {
  19. SqlConnection con = new SqlConnection("server=.;database=department;uid=sa;pwd=123456");
  20. return con;
  21. }
  22. }

3.这两种方法的比较

使用Asp.net控件实现比较简单，但在大量用户使用的情况下最好不要使用，不断向服务器请求会给服务器带来很大的负担。使用JQuery和ajax实现可以有动态效果，实现过程比较复杂，但有数据缓冲和ajax局部刷新可以减少服务器的负担。

本文转自http://blog.csdn.net/wangyajin333/article/details/36474545

时间： 2024-08-09 02:47:40

JQuery和ASP.NET分别实现级联下拉框效果的相关文章

jquery级联下拉框

$(document).ready(function(){     //找到三个下拉框     var carnameSelect = $(".carname").children("select");     var cartypeSelect = $(".cartype").children("select");     var wheeltypeSelect = $(".wheeltype").chi

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: <div class="wrap">        <div class="nice-select" name="nice-select">   

ASP.NET——实现两个下拉框动态联动

引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 "省"表 "市"表 2.添加控件 3.两个下拉框分别绑定数据源 protected void Page_Load(object sender, EventArgs e) { //判断是否第一次进入页面,如果是,则绑定数据库:如果不是,则无需绑定. if (!this.IsPost

Asp.net绑定带层次下拉框（select控件）

1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> 备注:查看源代码 4.后台代码 using System; using System.Data; using System.Web.UI.WebControl

本示例演示如何通过Struts2框架提供的标签，简单地实现【级联下拉框】

1.发布房屋表单页面的级联下拉框如下: 2.     进入发布页面前需要查询下拉框数据,Action代码如下: 3.     房屋发布页面JSP代码如下: <s:doubleselect>标签的属性说明: list:                     一级下拉框的数据来源集合,和Action中集合名称一样 listKey:              一级下拉框数据集合中的实体,作为value的属性名 listValue:           一级下拉框数据集合中实体,作为text的属性名

自己编写jQuery插件 之 无限级联下拉框

因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉框的个数并不是写死的,而是动态加载的.每当下拉框选择改变的时候,会发送一次ajax请求,请求成功返回json格式数据,当返回的数据不为空时(即有子节点时),则会向页面中添加一个下拉框,没有则不添加. 插件的实现代码如下: (function ($) { $.fn.CascadingSelect = function (options) { //默认参数设置

Struts2 &lt;s:doubleselect&gt;级联下拉框 详解析

运行环境:myeclipse8.6+jboss5.1+jvm1.6 先看最后目录结构: 直接上源码: complexFormTag.jsp: <%@ page language="java" contentType="text/html; charset=gb2312"pageEncoding="gb2312"%> <%@ taglib prefix="s" uri="/struts-tags&qu

jquery 根据后台返回值来选中下拉框 option 值

前景:下拉列表和要选中的下拉项都是通过后台传过来的本人用字符串拼接很low的方法实现: 一  给下拉框加一个默认的option 放在第一个类似于"无"或者"请选择": 二  把后台返回值放到 option 的一个自定义属性中 : 三  要选的东西在第一个option中取出判断即可: 四 用jquery each遍历 function SelectTrue(){ var a =[]; var i = 0 $(".wuoption").each(fu

asp.net MVC4 表单 - 下拉框

1.下拉框代码方式 控制器内构建下拉项目: List<SelectListItem> list = new List<SelectListItem>(); list.Add(new SelectListItem() { Text = "计算机", Value = "computer" }); list.Add(new SelectListItem() { Text = "数学", Value = "math&qu