js三级
联动下拉框怎么实现_
前端三级联动实现
代码
数据库：use mastergoif exists(select * from sysdatabases where name=’stu1′)drop database stu1gocreate database stu1on(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%)gouse stu1goif exists(select * from sysobjects where name=’classes’)drop database classesgocreate table classes(id int identity primary key,name varchar(20),direction varchar(20))insert into classesselect ‘2012271’,’.NET’ unionselect ‘2012272’,’J2EE’ unionselect ‘2012273’,’.NET’ unionselect ‘2012274’,’J2EE’ unionselect ‘2012275’,’J2EE’ unionselect ‘2012276’,’.NET’ unionselect ‘2012277’ ,’.NET’goselect * from classesif exists(select * from sysobjects where name=’student’)drop table studentgocreate 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)goinsert into studentselect ‘张三’,0,20,’内蒙赤峰’,’睡觉,聊天’,1 unionselect ‘李颂’,1,19,’湖北襄樊’,’逛街’,2 unionselect ‘吕两口’,0,18,’东北’,’轮滑’,3 unionselect ‘小斌’,1,20,’湖北十堰’,’做菜’,3 unionselect ‘哦哦’,0,19,’湖北枣阳’,’吃’,4 unionselect ‘康康’,1,22,’河南南阳’,’看美女’,5 unionselect ‘帅帅’,1,18,’湖北武汉’,’睡’,5 unionselect ‘忽忽’,1,22,’陕西西安’,’游戏’,6 unionselect ‘cc’,1,22,’湖北十堰’,’拼酒’,6 unionselect ‘小剑’,0,18,’深圳’,’看MM’,7 unionselect ‘勇勇’,1,19,’湖北十堰’,’吃了嘻嘻睡’,7goselect * from classesselect * from student,classes where student.c_id=classes.idselect * from classeshtml 文件：<!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里面的valueop.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里面的valueop1.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 /><div 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></div></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();}}
微信扫一扫
支付宝扫一扫
评论列表（0条）