三級聯動(只要是聯動都可以使用)

聯動在頁面中用的也是比較多的吧,寫一個簡單點的聯動。大佬勿噴,僅供參考,嘻嘻~~
1.建表、字段、以及後臺操作我就不寫了,這個應該沒毛病的,我就展示一下我的jsp怎麼寫的就好
2.jsp頁面操作

<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@page import="com.baizhi.entity.Province" %>


<html>
<head>
	<style>
		select{
			width:140px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		//頁面打開自動加載 市 

		$(function(){
			 $.post("根據自己的url ",null,function(result){
				$.each(result,function(ids,data){
					var op =$("<option value="+data.code+">"+data.name+"</option>")
					$("#province").append(op);
				})
				$("#province").change();
			},"json");
		});
		
		/* 市級改變後移除原有的 二級 三級option防止頁面重複加載屬性  */
		$(function(){
			$("#province").change(function(){
				$("#city").empty();
				var v=$(this).val();
				 $.get(" url ","provinceCode="+v,function(result){
					$.each(result,function(ids,data){
						var op =$("<option value="+data.code+">"+data.name+"</option>")
						$("#city").append(op);
					})
					$("#city").change();
				},"json");
			});
		}); 
		
		
		$(function(){
			$("#city").change(function(){
				$("#area").empty();
				var v=$(this).val();
				 $.get("url?cityCode="+v,function(result){
					console.log(result);
					$.each(result,function(ids,date){
						var op =$("<option value="+date.code+">"+date.name+"</option>")
						$("#area").append(op);
					})
				},"json");
			});
		}); 
	</script>

</head>
<body>
	省:<select id="province" >
 
	  </select>
	<br/>市:<select id="city">
	
	  </select>
	<br/>縣:<select id="area">
	
	  </select>
</body>
</html>

3.其他聯動跟這個類似,只要把數據換一下就Ok了,我是在項目中用到聯動了,然後就借鑑了一下這段代碼,可能感覺這個比較好理解把,所以安利一下。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章