`

纯JS实现三级级联下拉选择框

javaScript级联下拉选择框 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>三级联动例子</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: "广东"},
		{atcode: "20", typename: "湖南"},
		{atcode: "30", typename: "陕西"}
	];
	var assessmentContents = [
		{atcode: "10", acCode: "1001", acName: "深圳"},
		{atcode: "10", acCode: "1002", acName: "珠海"},
		{atcode: "20", acCode: "2001", acName: "长沙"},
		{atcode: "20", acCode: "2002", acName: "湘潭"},
		{atcode: "20", acCode: "2003", acName: "邵阳"},
		{atcode: "30", acCode: "3002", acName: "西安"},
		{atcode: "30", acCode: "3003", acName: "商洛"}
	];
	var assessmentStandards = [
		{atcode: "10", acCode: "1001", asCode: "100101", atContent: "福田区"},
		{atcode: "10", acCode: "1001", asCode: "100102", atContent: "南山区"},
		{atcode: "10", acCode: "1002", asCode: "100201", atContent: "香洲区"},
		{atcode: "10", acCode: "1002", asCode: "100202", atContent: "拱北区"},
		{atcode: "20", acCode: "2001", asCode: "200101", atContent: "芙蓉区"},
		{atcode: "20", acCode: "2001", asCode: "200102", atContent: "岳麓区"},
		{atcode: "20", acCode: "2002", asCode: "200201", atContent: "雨湖区"},
		{atcode: "20", acCode: "2002", asCode: "200202", atContent: "湘江区"},
		{atcode: "20", acCode: "2003", asCode: "200301", atContent: "双清区"},
		{atcode: "20", acCode: "2003", asCode: "200302", atContent: "大祥区"},
		{atcode: "30", acCode: "3002", asCode: "300201", atContent: "雁塔区"},
		{atcode: "30", acCode: "3003", asCode: "300302", atContent: "商州区"}
	];

	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) {
		$("address").value = object.options[object.selectedIndex].text;
		
		var list = filterList(assessmentContents, "atcode", object.value);

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

	function onCategory2Change(object) {
		$("address").value = $("category1").options[$("category1").selectedIndex].text + object.options[object.selectedIndex].text;
		
		var list = filterList(assessmentStandards, "acCode", object.value);

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

	function onCategory3Change(object) {
		$("address").value = $("category1").options[$("category1").selectedIndex].text + $("category2").options[$("category2").selectedIndex].text + object.options[object.selectedIndex].text;
		//$("address").value = $("category1").options[$("category1").selectedIndex].text + $("category2").options[$("category2").selectedIndex].text + $("category3").options[$("category3").selectedIndex].text;
	}

	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>
  <input id="address" type="text"></input>
 </body>
</html>

运行结果：

  • 大小: 3.8 KB
分享到：
| javascript中return的设计缺陷
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics