利用XMLHTTP实现无刷新二级联动Select

转载 2006年06月16日 18:09:00
这是继 "利用XMLHTTP无刷新获取数据" 的另一篇关于XMLHTTP的应用.
关于XMLHTTP.可以说,是一个很好的接合剂.把客户端和服务端的距离拉近了.
利用XMLHTTP.我们可以实现很多好的想法.

这文章.实现了二级连动Select.
传统二级连动是把所有的数据都传到有客户端..
利用XMLHTTP.我们可以实时地返回我们所需要的数据.


select.htm
程序代码 程序代码

<script language="JavaScript">
function GetResult(str)
{
/*
*--------------- GetResult(str) -----------------
* GetResult(str)
* 功能:通过XMLHTTP发送请求,返回结果.
* 参数:str,字符串,发送条件.
* 实例:GetResult(document.all.userid.value);
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-27 19:02
*--------------- GetResult(str) -----------------
*/
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
oBao.open("POST","Server.asp?sel="+str,false);
oBao.send();
//服务器端处理返回的是经过escape编码的字符串.
//通过XMLHTTP返回数据,开始构建Select.
BuildSel(unescape(oBao.responseText),document.all.sel2)
}

function BuildSel(str,sel)
{
/*
*--------------- BuildSel(str,sel) -----------------
* BuildSel(str,sel)
* 功能:通过str构建Select.
* 参数:str,字符串,由服务端返回的.有特定结构"字符串1,字符串2,字符串3"
* 参数:sel,要构建的Select
* 实例:BuildSel(unescape(oBao.responseText),document.all.sel2)
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-27 19:02
*--------------- BuildSel(str,sel) -----------------
*/
//先清空原来的数据.
sel.options.length=0;
var arrstr = new Array();
arrstr = str.split(",");
//开始构建新的Select.
for(var i=0;i<arrstr.length;i++)
{
sel.options[sel.options.length]=new Option(arrstr[i],arrstr[i])
}
}
</script>
<select name="sel" onChange="GetResult(this.value)">
<option value="">请选择
<option value="福建省">福建省
<option value="湖北省">湖北省
<option value="辽宁省">辽宁省
<select>
<select name="sel2"></select>


server.asp 服务器端处理.
程序代码 程序代码

<% @Language="JavaScript" %>
<%
function OpenDB(sdbname)
{
/*
*--------------- OpenDB(sdbname) -----------------
* OpenDB(sdbname)
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = OpenDB("database.mdb");
* author:wanghr100(灰豆宝宝.net)
* update:2004-5-12 8:18
*--------------- OpenDB(sdbname) -----------------
*/
var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
var conn = Server.CreateObject("ADODB.Connection");
conn.Open(connstr);
return conn;
}
var oConn = OpenDB("data.mdb");
var province = Request("sel");
var arrResult = new Array();
var sql = "select city from china where province='"+province+"'";
var rs = Server.CreateObject("ADODB.Recordset");
rs.Open(sql,oConn,1,1);
while(!rs.EOF)
{
//遍历所有适合的数据放入arrResult数组中.
arrResult[arrResult.length] = rs("city").Value;
rs.MoveNext();
}
//escape解决了XMLHTTP。中文处理的问题.
//数组组合成字符串.由","字符串连接.
Response.Write(escape(arrResult.join(",")));
%>



数据库设计
data.mdb
表china.
字段
id 自动编号
province 文本
city 文本

表:china 数据:
id province city
1 福建省 福州市
2 福建省 厦门市
3 福建省 泉州市
4 湖北省 武汉市
5 湖北省 荆州市
6 湖北省 宜昌市
7 辽宁省 沈阳市
8 辽宁省 大连市
9 辽宁省 盘锦市

jQuery结合PHP+MySQL实现二级联动下拉列表[实例]

二级联动的实现方法还真不少,实用性也很强,这里结合一个学生信息表的实例,来分享一下我的实现过程 实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询...
  • zyu67
  • zyu67
  • 2015年08月09日 09:08
  • 2598

利用jquery、json实现前台无刷新的多级联动下拉菜单

这两天我都在做一个项目,s2sh的一个项目,里面有一个模块需要
  • u011687037
  • u011687037
  • 2014年07月20日 19:24
  • 4201

ajax+struts2实现三级联动和页面无刷新案例详解

大致实现思想:         1.三级联动表t_data_level主要字段id,parentid,value,name,级联就是通过id与parentid关联查出;         2.页面无...
  • lxhjava
  • lxhjava
  • 2016年12月03日 23:52
  • 1141

Jquery实现的&lt;select&gt;的动态无刷新的二级联动菜单

  • 2013年11月26日 10:42
  • 133KB
  • 下载

jsp+javascript实现动态下拉二级联动(select+option)

最近在做一个项目,要使用动态下拉二级联动效果。就是当改变新闻大类别后,相应的小类别也要调整。数据库我设置了三个字段(id,name,parentId),因为只做二层目录,所以第一层目录的父节点(par...
  • Lixuanshengchao
  • Lixuanshengchao
  • 2016年06月07日 00:10
  • 5321

js实现HTML中Select二级联动

效果图选择后 js代码 //定义 费用科目 数据数组 fylxArray = new Array(); fylxArray[0] = new Array("",""); f...
  • qq_33583322
  • qq_33583322
  • 2018年01月03日 17:40
  • 47

JS+html 实现select二级联动菜单

//定义 城市 数据数组 cityArray = new Array(); cityArray[0] = new Array("河南省","郑州市|开封市|洛阳市|平顶山市|安阳市|鹤壁市|新乡市|焦...
  • u011701534
  • u011701534
  • 2013年10月24日 14:43
  • 7068

在Django下使用Jquery ajax实现select表单的二级联动

在Django下使用Jquery ajax实现select表单的二级联动 采用Django+Jquery实现: 网上也看到很多例子,综合很多例子,经过尝试,实现一个简单的省市二级联动,记下来,以免...
  • svgbdbdbd
  • svgbdbdbd
  • 2016年01月12日 19:24
  • 3201

二级联动效果实现(在javascript中解析xml文件添加到html(select)中)

// 当窗体加载完毕,执行 window.onload=function(){ /** * 第一步:得到xml document对象 */ var xmlDoc = getXmlDocu...
  • Mr_MHl
  • Mr_MHl
  • 2014年10月28日 20:31
  • 485

VUE2 前端实现 静态二级省市联动选择select

TIPs: 用了element UI的select选择器 。 换成普通select也差不多。 数据没写南海诸岛,没写默认全国。 处理对应地级市的数据用的excel (笑) ✿✿✿✿✿...
  • lllo3o
  • lllo3o
  • 2017年06月09日 11:14
  • 8168
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用XMLHTTP实现无刷新二级联动Select
举报原因:
原因补充:

(最多只允许输入30个字)