省市区三级联动及回显

最新推荐文章于 2023-08-25 22:22:24 发布

原创最新推荐文章于 2023-08-25 22:22:24 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

4 篇文章

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户编辑</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript">
$(function(){
//回显
var address =$("#caddress").val();
var addresss=address.split("-");
var province=addresss[0];
var city=addresss[1];
var district=addresss[2];
//初始化省
$.post("${pageContext.request.contextPath }/address/province.action",function(data){
$.each(data,function(i,n){
$option=$('<option value="'+n.id+'">'+n.province+'</option>');
$("#province").append($option);
if(n.province==province){
$("#province").val(n.id);
$("#province").change();
}
});
});
//联动市
$("#province").change(function(){
$.post("${pageContext.request.contextPath }/address/city.action",{pid:$("#province").val()},function(data){
$("#city option:not(:first)").remove();
$("#district option:not(:first)").remove();
$.each(data,function(i,n){
var $option=$('<option value="'+n.id+'">'+n.city+'</option>');
$("#city").append($option);
if(n.city==city){
$("#city").val(n.id);
$("#city").change();
}
});
});
});

//联动区
$("#city").change(function(){
$.post("${pageContext.request.contextPath }/address/district.action",{cid:$("#city").val()},function(data){
$("#district option:not(:first)").remove();
$.each(data,function(i,n){
var $option=$('<option value="'+n.id+'">'+n.district+'</option>');
$("#district").append($option);
if(n.district==district){
$("#district").val(n.id);
}
});
});
});
//设置按钮的点击事件
$("#save").click(function(){
var flag = $("#form").form("validate");
if(flag){
var result =$("#province").find("option:selected").text()
+"-"
+$("#city").find("option:selected").text()
+"-"
+$("#district").find("option:selected").text();
$("input[name=caddress]").val(result);
$("#form").submit();
}
});
});

</script>
</head>
<body class="easyui-layout">
<div data-options="region:'center'" style="overflow:auto;padding:5px;" border="false">
<form id="form" method="post" action="${pageContext.request.contextPath }/company/save.action">
<input type="hidden" id="caddress" name="caddress" value="${company.caddress }"/>
<input type="hidden" name="cid" value="${company.cid }"/>
<table align="center" cellspacing="6">
<tr>
<th colspan="4" align="center">店面信息</th>
</tr>
<tr>
<td>省:</td>
<td>
<select id="province" style="width:150px">
<option value="-1">---请选择省---</option>
</select>
</td>
<td>市:</td>
<td>
<select id="city" style="width:150px" >
<option value="-1">---请选择市---</option>
</select>
</td>
</tr>
<tr>
<td>区:</td>
<td>
<select id="district" name="districtno" style="width:150px">
<option value="-1">---请选择区---</option>
</select>
</td>
<td width="90px">公司名称:</td>
<td><input type="text" name="cname" value="${company.cname}" class="easyui-validatebox"/></td>
</tr>
</table>
</form>

</div>
<div data-options="region:'south'" style="height:100px;">
<div class="datagrid-toolbar" align="center">
<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
<a icon="icon-undo" onclick="javascript:history.back();" class="easyui-linkbutton" plain="true" >返回</a>
</div>
</div>
</body>

</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------