投稿
  1. 簡單一點首頁
  2. 投稿

前端三級聯動實現代碼：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 />

<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();

}

}

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/222091.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
0 0
上一篇 2024-12-09 13:26
下一篇 2024-12-09 13:26

相關推薦

發表回復

登錄後才能評論