页面做级联效果

最新推荐文章于 2023-07-27 15:24:06 发布

ayxtlztds24

最新推荐文章于 2023-07-27 15:24:06 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

分类专栏： html&&CSS 文章标签： xhtml javascript ViewUI

本文链接：https://blog.youkuaiyun.com/ayxtlztds24/article/details/84040122

html&&CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在网页中实现动态级联选择框的功能，包括使用JavaScript操作数组和多级下拉列表创建交互式的选择组件。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" src="javascript/MultiDropDownList.js"></script>
</head>

<body>
	<script language="javascript">
	var a = new Array();
	var b = new Array();
	b[0] = new Array();
	b[0][0] = "3301";
	b[0][1] = "杭州";
	b[1] = new Array();
	b[1][0] = "3302";
	b[1][1] = "宁波";
	var c = new Array();
	c[0] = new Array();
	c[0][0] = "330101";
	c[0][1] = "上城区";
	c[1] = new Array();
	c[1][0] = "330201";
	c[1][1] = "宁波区";
	var d = new Array();
	d[0] = new Array();
	d[0][0] = "33010101";
	d[0][1] = "文三路";
	a[0] = b;
	a[1] = c;
	a[2] = d;
	var mc = new MultiDropDownList("mc",a,new Array("a","b","c"),"demo","^@.{2}",new Array("","-请选择-"),new Array("3301","330101","33010101"),"");
	mc.create();
	</script>
</body>
</html>

一种类似与假分页的级联实现

		<tr class="trbg0">
				<td class="table-title"><span class="f-red">*</span>所属地区</td>
				<td colspan="5" style="text-align:left;" class="table-title">
				<input name="btEnterprise.szs" type="hidden" value="33" />
				<input name="btEnterprise.szsmc" type="hidden" value="浙江省" />
					<script language="javascript">
	var a = new Array();
	var b = new Array();
	<s:iterator value="shilist" id="list" status="L">
	b[${L.index}] = new Array();
	b[${L.index}][0] = "${list.code}";
	b[${L.index}][1] = "${list.name}";
	</s:iterator>
	var c = new Array();
	<s:iterator value="xianlist" id="list2" status="K">
	c[${K.index}] = new Array();
	c[${K.index}][0] = "${list2.code}";
	c[${K.index}][1] = "${list2.name}";
	</s:iterator>
	a[0] = b;
	a[1] = c;
	var mc = new MultiDropDownList("mc",a,new Array("btEnterprise.szshi","btEnterprise.szqx"),"validate[required]","^@.{2}",new Array("","-请选择-"),new Array("${btEnterprise.szshi}","${btEnterprise.szqx}"),"");
	mc.create();
	</script>

动态实践代码