js三级联动下拉框怎么实现（前端三级联动实现代码）
数据库：
use master
go
if exists(select * from sysdatabases where name=&’stu1&′)
drop database stu1
go
create database stu1
on
(
name=&’stu1&′,
filename=&’D:\sql\stu1.mdf&’,
size=4,
filegrowth=10%
)
log on
(
name=&’stu1_log&’,
filename=&’D:\sql\stu1_log.ldf&’,
size=4,
filegrowth=10%
)
go
use stu1
go
if exists(select * from sysobjects where name=&’classes&’)
drop database classes
go
create table classes
(
id int identity primary key,
name varchar(20),
direction varchar(20)
)
insert into classes
select &‘2012271&’,&’.NET&’ union
select &‘2012272&’,&’J2EE&’ union
select &‘2012273&’,&’.NET&’ union
select &‘2012274&’,&’J2EE&’ union
select &‘2012275&’,&’J2EE&’ union
select &‘2012276&’,&’.NET&’ union
select &‘2012277&’ ,&’.NET&’
go
select * from classes
if exists(select * from sysobjects where name=&’student&’)
drop table student
go
create table student
(
id int identity primary key,
name varchar(20),
sex bit check(sex in(1,0)),
age int,
address varchar(30),
hobby varchar(30),
c_id int
)
go
insert into student
select &‘张三&’,0,20,&’内蒙赤峰&’,&’睡觉,聊天&’,1 union
select &‘李颂&’,1,19,&’湖北襄樊&’,&’逛街&’,2 union
select &‘吕两口&’,0,18,&’东北&’,&’轮滑&’,3 union
select &‘小斌&’,1,20,&’湖北十堰&’,&’做菜&’,3 union
select &‘哦哦&’,0,19,&’湖北枣阳&’,&’吃&’,4 union
select &‘康康&’,1,22,&’河南南阳&’,&’看美女&’,5 union
select &‘帅帅&’,1,18,&’湖北武汉&’,&’睡&’,5 union
select &‘忽忽&’,1,22,&’陕西西安&’,&’游戏&’,6 union
select &‘cc&’,1,22,&’湖北十堰&’,&’拼酒&’,6 union
select &‘小剑&’,0,18,&’深圳&’,&’看MM&’,7 union
select &‘勇勇&’,1,19,&’湖北十堰&’,&’吃了嘻嘻睡&’,7
go
select * from classes
select * from student,classes where student.c_id=classes.id
select * from classes
html 文件：
&<!DOCTYPE html PUBLIC &“-//W3C//DTD XHTML 1.0 Transitional//EN&” &“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&”&>
&<html xmlns=&”http://www.w3.org/1999/xhtml&”&>
&<head&>
&<title&>&</title&>
&<script src=&”jquery1.8.3/jquery-1.8.3.min.js&” type=&”text/javascript&”&>&</script&>
&<script src=&”jquery1.8.3/json2.js&” type=&”text/javascript&”&>&</script&>
&<script type=&”text/javascript&”&>
$(function () {
$.ajax({
type: &“post&”,
url: &“a.ashx&”,
success: function (msg) {
var ok = JSON.parse(msg);
$.each(ok.DataTable, function(i, j) {
var op = new Option(); //创建option对象
op.value = j.id; //option里面的value
op.text = j.name; //显示的值
//alert(op.text);
//把内容加载到select里面
document.getElementById(&“st1&”).add(op);
});
}
});
$(&“#st1&”).change(function () {
var str = $(&“#st1&”).val();
$.ajax({
type: &“post&”,
url: &“b.ashx&”,
data: { id: str },
success: function(msg) {
var kk = JSON.parse(msg);
$(&“#st2&”).empty();
var s = $(&“#tbody&”).html(&“&”);
$.each(kk.DataTable, function(o, n) {
var op1 = new Option(); //创建option对象
op1.value = n.id; //option里面的value
op1.text = n.name; //显示的值
document.getElementById(&“st2&”).add(op1);
$(&“#stu&”).attr(&“style&”, &“display:black&”);
var sex = (n.sex == &‘True&’) ? &“男&” : &“女&”;
$(&“#tbody&”).append(&“&<tr&>&<td&>&” + n.name + &“&</td&>&<td&>&” + sex + &“&</td&>&<td&>&” + n.age + &“&</td&>&<td&>&” + n.address + &“&</td&>&<td&>&” + n.hobby + &“&</td&>&<td&>&” + n.classname + &“&</td&>&</tr&>&”);
});
}
});
});
$(&“#st2&”).change(function () {
var sid = $(&“#st2&”).val();
var s = $(&“#tbody&”).html(&“&”);
$.ajax({
type: &“post&”,
url: &“c.ashx&”,
data: { id: sid },
success: function(msg) {
var ok = JSON.parse(msg);
$.each(ok.DataTable, function(l, p) {
$(&“#stu&”).attr(&“style&”, &“display:black&”);
var sex1 = (p.sex == &‘True&’) ? &“男&” : &“女&”;
$(&“#tbody&”).append(&“&<tr&>&<td&>&” + p.name + &“&</td&>&<td&>&” + sex1 + &“&</td&>&<td&>&” + p.age + &“&</td&>&<td&>&” + p.address + &“&</td&>&<td&>&” + p.hobby + &“&</td&>&<td&>&” + p.classname + &“&</td&>&</tr&>&”);
});
}
});
});
})
&</script&>
&</head&>
&<body&>
&<select id=&”st1&″&>&</select&>班级
&<select id=&”st2&″&>&</select&>学生姓名
&<br /&>
&<p id=&”stu&” style=&” display:none&”&>
&<table border=&”1&″ id=&”tab&” cellspacing=&”0&″ cellpadding=&”0&″ width=&”500&″&>
&<thead&>
&<tr&>
&<th&>学生姓名&</th&>
&<th&>学生性别&</th&>
&<th&>学生年龄&</th&>
&<th&>学生住址&</th&>
&<th&>学生爱好&</th&>
&<th&>所在班级&</th&>
&</tr&>
&</thead&>
&<tbody id=&”tbody&”&>&</tbody&>
&</table&>
&</p&>
&</body&>
&</html&>
a.ashx 文件：
public class a : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = &“text/plain&”;
DataTable dt = getTable();
string str = JSONHelper.DataTableToJsonEx(dt);
context.Response.Write(str);
}
DataTable getTable()
{
return SqlHelper.GetTable(&“select id,name from classes&”);
}
public bool IsReusable
{
get
{
return false;
}
}
}
b.ashx 文件
public class b : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = &“text/plain&”;
int id = int.Parse(context.Request[&“id&”].ToString());
DataTable dt = getTable(id);
string ss = JSONHelper.DataTableToJsonEx(dt);
context.Response.Write(ss);
}
DataTable getTable(int id)
{
StringBuilder sb = new StringBuilder();
sb.Append(&” select s.id as id,s.name as name,s.sex as sex, &“);
sb.Append(&” s.age as age,s.address as address, &“);
sb.Append(&” s.hobby as hobby,c.name as classname &“);
sb.Append(&” from student as s,classes as c &“);
string sql = string.Empty;
sql = sb.ToString();
sql += string.Format(&“where s.c_id=c.id and c.id={0}&”,id);
// string sql = string.Format(&“select * from student where c_id={0}&”,id);
return SqlHelper.GetTable(sql);
}
public bool IsReusable
{
get
{
return false;
}
}
}
c.ashx 文件
public class c : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = &“text/plain&”;
int id = int.Parse(context.Request[&“id&”].ToString());
DataTable dt = getTable(id);
string ss = JSONHelper.DataTableToJsonEx(dt);
context.Response.Write(ss);
}
DataTable getTable(int id)
{
StringBuilder sb = new StringBuilder();
sb.Append(&” select s.name as name,s.sex as sex,s.age as age, &“);
sb.Append(&” s.address as address,s.hobby as hobby, &“);
sb.Append(&” c.name as classname from student as s,classes as c &“);
string sql = string.Empty;
sql = sb.ToString();
sql += string.Format(&“where s.c_id=c.id and s.id={0}&”,id);
// string sql = string.Format(&“select s.name as name,s.sex as sex,s.age as age,s.address as address,s.hobby as hobby,c.name as classname from student as s,classes as c where s.c_id=c.id and s.id={0}&”, id);
return SqlHelper.GetTable(sql);
}
public bool IsReusable
{
get
{
return false;
}
}
}
JSONHelper.cs 辅助文件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Text;
using System.Web.Script.Serialization;
/// &<summary&>
///JsonHelper 的摘要说明
/// &</summary&>
public class JSONHelper
{
private static List&<Dictionary&<string, object&>&> DataTableToList(DataTable table)
{
List&<Dictionary&<string, object&>&> list = new List&<Dictionary&<string, object&>&>();
foreach (DataRow row in table.Rows)
{
Dictionary&<string, object&> dic = new Dictionary&<string, object&>();
foreach (DataColumn column in table.Columns)
{
dic.Add(column.ColumnName,row[column.ColumnName]);
}
list.Add(dic);
}
return list;
}
public static string ObjectToJson(object obj)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
return jss.Serialize(obj);
}
public static string DataTableToJson(DataTable table)
{
return ObjectToJson(DataTableToList(table));
}
/// &<summary&>
/// 通过拼字符串将DataTable转为Json
/// &</summary&>
/// &<param name=&”table&”&>&</param&>
/// &<returns&>&</returns&>
public static string DataTableToJsonEx(DataTable table)
{
string JsonName = &“DataTable&”;
StringBuilder Json = new StringBuilder(&“{\&;&” + JsonName + &“\&;:[&“);
if (table.Rows.Count &> 0)
{
foreach (DataRow row in table.Rows)
{
Json.Append(&“{&“);
foreach (DataColumn column in table.Columns)
{
Json.Append(&“\&;&” + column.ColumnName + &“\&;:\&;&” + row[column.ColumnName].ToString() + &“\&;,&”);
}
Json.Remove(Json.Length &– 1, 1);
Json.Append(&“},&”);
}
Json.Remove(Json.Length &– 1, 1);
}
Json.Append(&“]}&”);
return Json.ToString();
}
}