当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

JS实现的3级联动例子

发表于: 2015-06-17   作者:cgs1999   来源:转载   浏览次数:
摘要: 朋友项目需要实现3级联动,需要JS实现的,网上找的例子有些复杂,自己动手帮朋友写了一个简单的3级联动的例子,没有使用任何第三方JS库,相关数据使用JSON数组。 完整代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <hea
朋友项目需要实现3级联动,需要JS实现的,网上找的例子有些复杂,自己动手帮朋友写了一个简单的3级联动的例子,没有使用任何第三方JS库,相关数据使用JSON数组。

完整代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> 3级联动例子 </title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Language" content="UTF-8" />
   <meta http-equiv="expires" content="0">
   <meta http-equiv="Pragma" content="no-cache">
   <meta content="all" name="robots" />
   <SCRIPT LANGUAGE="JavaScript">
   <!--
	var assessmentTypes = [
		{atcode: "10", typename: "typename1"},
		{atcode: "20", typename: "typename2"},
		{atcode: "30", typename: "typename3"}
	];
	var assessmentContents = [
		{atcode: "10", acCode: "10", acName: "acName1"},
		{atcode: "20", acCode: "20", acName: "acName2"},
		{atcode: "20", acCode: "30", acName: "acName3"},
		{atcode: "30", acCode: "40", acName: "acName4"},
		{atcode: "30", acCode: "50", acName: "acName5"},
		{atcode: "30", acCode: "60", acName: "acName6"}
	];
	var assessmentStandards = [
		{atcode: "10", acCode: "10", asCode: "10", atContent: "atContent1"},
		{atcode: "10", acCode: "10", asCode: "20", atContent: "atContent2"},
		{atcode: "10", acCode: "10", asCode: "30", atContent: "atContent3"},
		{atcode: "20", acCode: "20", asCode: "40", atContent: "atContent4"},
		{atcode: "20", acCode: "20", asCode: "50", atContent: "atContent5"},
		{atcode: "20", acCode: "30", asCode: "60", atContent: "atContent6"},
		{atcode: "20", acCode: "30", asCode: "70", atContent: "atContent7"},
		{atcode: "30", acCode: "40", asCode: "80", atContent: "atContent8"},
		{atcode: "30", acCode: "40", asCode: "90", atContent: "atContent9"},
		{atcode: "30", acCode: "50", asCode: "100", atContent: "atContent10"},
		{atcode: "30", acCode: "60", asCode: "110", atContent: "atContent11"}
	];

	function loadSelect(id, list, valueField, textField) {
		var html = "<option value='-1'>------请选择---</option>";
		if(list!=null && list.length>0) {
			for(var i=0, len=list.length; i<len; i++) {
				html += "<option value='" + list[i][valueField] + "'>" + list[i][textField] + "</option>";
			}
		}

		$(id).innerHTML=html;
	}

	function onload() {
		loadSelect("category1", assessmentTypes, "atcode", "typename");
		loadSelect("category2");
		loadSelect("category3");
	}

	function filterList(dataList, valueField, value) {
		var list = [];
		if(dataList!=null && dataList.length>0) {
			for(var i=0, len=dataList.length; i<len; i++) {
				if(dataList[i][valueField]==value) {
					list[list.length] = dataList[i];
				}
			}
		}
		return list;
	}

	function onCategory1Change(object) {
		var list = filterList(assessmentContents, "atcode", object.value);

		loadSelect("category2", list, "acCode", "acName");
		loadSelect("category3");
	}

	function onCategory2Change(object) {
		var list = filterList(assessmentStandards, "acCode", object.value);

		loadSelect("category3", list, "asCode", "atContent");
	}

	function onCategory3Change(object) {
	}

	function $(id) {
		return document.getElementById(id);
	}

	window.onload = onload;
   //-->
   </SCRIPT>
 </head>

 <body onload = "onload()">
  <select id="category1" onchange="onCategory1Change(this)"></select>
  <select id="category2" onchange="onCategory2Change(this)"></select>
  <select id="category3" onchange="onCategory3Change(this)"></select>
 </body>
</html>

JS实现的3级联动例子

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
今天在新界面Google Adsense看到如下一个效果,觉得挺不错的: 左侧图形Flash表示 右侧HTML普通内容
EasyUI combox实现联动 很多时候都会用到combox的联动效果,选择上一个combox的值就自动带出这个值
任务地址:http://task.zhubajie.com/3275832/ 具体要求: 要求 1) 选单样式参照附件 2) 点击第一
一:图片预览: 二:js代码如下: <html> <head> <title>年月日三下拉框联动<
效果图: 完整代码: <html> <head> <title>年月日三下拉框联动</title> &l
效果图: 完整代码: <html> <head> <title>年月日三下拉框联动</title> &l
介绍: AwesomeMvc是个开源项目,地址:http://awesome.codeplex.com/ AwesomeMvc包含了一套丰富的
JS省市区使用文档 一:服务器返回JSON格式要求如下网址里面data的格式:(拿KISSY组件data格式来做的
在网站注册的页面上经常要选择注册地点,如果改变省的名称就能出现对应的市级的名称,将为用户带来
一、注意点 (1)x轴的类目每个图表要一致 (2)x轴为category类型,y轴为value类型 var option = {
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号