聯動在頁面中用的也是比較多的吧,寫一個簡單點的聯動。大佬勿噴,僅供參考,嘻嘻~~
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了,我是在項目中用到聯動了,然後就借鑑了一下這段代碼,可能感覺這個比較好理解把,所以安利一下。