地区三级联动实现方式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>rui</title>
<script type="text/javascript"
	src="resources/js/comm/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		getAreas("P", "#areaOne");
	})

	function openTwo(code) {
		getAreas(code.value, "#areaTwo");

	}

	function openThree(code) {
		getAreas(code.value, "#areaThree");
	}

	//通过等级获取了菜单
	function getAreas(level, seleId) {
		$.ajax({
			url : "/baseClicent/base/getAreas",
			type : "POST",
			dataType : "json",
			data : {
				code : level
			},
			success : function(returnData, status) {
				if (status = "success") {
					var data = returnData.data;
					//alert(JSON.stringify(data))
					var html = '<option value="">请选择：</option>';
					for (var i = 0; i < data.length; i++) {
						html += '<option value="'+data[i].code+'" >'
								+ data[i].name + '</option>';
					}

					$(seleId).html(html);
				}
			}
		});
	}
</script>
</head>

<body>
	<select onchange="openTwo(this)" id="areaOne">
	</select>

	<select onchange="openThree(this)" id="areaTwo">
		<option>请选择</option>
		<option>请选择</option>
	</select>

	<select id="areaThree">
		<option>请选择</option>
		<option>请选择</option>
	</select>

</body>
</html>

时间： 2024-10-13 00:22:36

地区三级联动实现方式的相关文章

地区三级联动--省份province

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地区三级联动</title> <script src="./jquery.js"></script> </head> <body> <h2>地区三级联动</h2> 省

中国地区三级联动菜单(纯js制作)

第一步:在网页中写入如下代码: <!DOCTYPE html>  <html> <head> <title>三级联动菜单</title><br> <script src="style/jsAddress.js"></script>  </head>

使用pull解析和spinner实现省市地区三级联动的效果

xml资源文件 <?xml version="1.0" encoding="UTF-8"?>  <citylist> <p p_id="01"> <pn>

省份地区三级联动的简单实现

在此直接导入代码,详细内容代码中有注释,相应需要引入的文件大家可以自己到相应网站下载: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <select id="province" name="provinc

省份，城市，地区------三级联动菜单

模板部分代码: <form method='post' action='' id='myform' name='myform'> <dl><dt>地址</dt> <dd> <select name='prov' id='prov'> <option value=''>省份</option> <?php $prov=M('')->where($where)->order('order')->

控制层: <?phpnamespace app\index\controller; use think\Controller;use think\Db; class Addr extends Controller{ public function addr(){ $one = Db::name('global_region') -> where(['parent_id' => 0]) -> select(); return view('addr',['one'=>$one])

（转）JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动

JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动原文链接:http://heisetoufa.iteye.com/blog/353974 比较好的二级联动: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE>

在ASP.NET MVC中实现一种不同于平常的三级联动、级联方式, 可用于城市、车型选择等多层级联场景

三级或多级联动的场景经常会碰到,比如省.市.区,比如品牌.车系.车型,比如类别的多级联动......我们首先想到的是用三个select来展示,这是最通常的做法.但在另外一些场景中,比如确定搜索条件的时候,对于三级联动来说,可能选择1个,2个,或3个条件,我想,以下的方式可能更适合: 以上,可以只选择品牌,或同时选择品牌.车系,或同时选择品牌.车系.车型,最后把选择的内容展示到input上,并以逗号隔开. 可以实现的功能包括: ○ 点击最上面的input弹出div,此时只显示品牌区域○ 点击最左边

全国地区选择（三级联动）

1.新建HTML文件,引入必须的js文件. <script src="../js/jquery.min.js"></script> //自行引入 <script src="../js/Area.js"></script> <script src="../js/AreaData_min.js"></script> Area.js: 1 // 地址选择三级联动 2 $(funct