写这篇文章 是因为我在网上找了很多级联 可是代码太繁琐 还经常出bug 然后决定自己研究一下 然后记录下来 其实省市区级联没有想象的那么难 多级级联也是
先看一下效果图
这是初始化页面
这是选完以后的界面
我先说一下中间碰到的bug
1:选择完省后 市加载出来了 假如我选错省了 想重新选 但是发现重新选的省对应的市 叠加在刚才选的市下面 这也就是一个bug
怎么解决的呢? 是每次返回去重新选的时候 把之前选的清空了 一会上代码就知道了
2:选择完省后 市加载出来了(默认第一个) 假如很巧 我就在第一个市住 然后我点开 点我的市 发现后面的加载不出来
怎么解决的呢? 就是给每个下拉框加个默认值 这样就没问题了
3:前两个bug解决完后 发现又出现一个bug 就是我在重新选的时候 把下拉框的默认值给删了 然后bug又回来了 那有问题就要解决
解决方法 加行代码 $("#city option:gt(0)").remove(); #号后面是select框的id值
下面上代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试级联</title>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="layui/layui.all.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<center>
省:<select id="province" style="width: 200px;">
<option>-- 请选择 --</option>
</select><br/><br/>
<input type="hidden" id="parentid" value="">
市:<select id="city" style="width: 200px;">
<option>-- 请选择 --</option>
</select><br/><br/>
<input type="hidden" id="cityparentid" value="">
区:<select id="area" style="width: 200px;">
<option>-- 请选择 --</option>
</select>
<input type="hidden" id="areaparentid" value="">
</center>
<script type="text/javascript">
$(function(){
var parentid = "";
var cityparentid = "";
var areaparentid = "";
//获取省份
$("#province").click(function(){
$.post("area.html",{level:1},function(data){
if(data.is){
$(data.data).each(function(index,item){
$("#province").append('<option id="'+item.areaid+'" value="'+item.areaid+'">'+item.areaname+'</option>');
});
}else{
layer.mag("网络异常,请稍后重试!",{icon:2,time:2000});
}
},"json");
});
//获取市
$("#province").change(function(){
parentid = $("#province option:selected").attr("id");
$("#city option:gt(0)").remove();
$("#area option:gt(0)").remove();
$.post("areaparentid.html",{parentid:parentid},function(data){
if(data.is){
$(data.data).each(function(index,item){
$("#city").append('<option id="'+item.areaid+'" value="'+item.areaid+'">'+item.areaname+'</option>');
});
}else{
layer.mag("网络异常,请稍后重试!",{icon:2,time:2000});
}
},"json");
});
//获取区
$("#city").change(function(){
cityparentid = $("#city option:selected").attr("id");
$("#area option:gt(0)").remove();
$.post("areaparentid.html",{parentid:cityparentid},function(data){
if(data.is){
$(data.data).each(function(index,item){
$("#area").append('<option id="'+item.areaid+'" value="'+item.areaid+'">'+item.areaname+'</option>');
});
}else{
}
},"json");
});
var c = $("#city option");
console.log(c);
$("#area").change(function(){
areaparentid = $("#area option:selected").attr("id");
/* alert(parentid);
alert(cityparentid);
alert(areaparentid); */
$("#parentid").val(parentid);
$("#cityparentid").val(cityparentid);
$("#areaparentid").val(areaparentid);
});
});
</script>
</body>
</html>
以上就是HTML代码 但是但是 仅仅以后HTML代码是不一样的 因为这样的代码 你也就看看 实现不了具体的效果
因为你没后台ajax返回那个类(自己写的 所以你光这样看是不行的 还要配合我的java代码和数据库 才能出来效果 别忘了引入jQuery文件 和layui文件 如果不知道怎么引入layui 百度一下 实在不会 就用最简单的alert())
那个java类我以前的博客里面有 你只需要复制一下 然后沾过去就行 附上我那个博客的链接 那个java类在博客最下面
https://blog.csdn.net/qq_39234410/article/details/83150156
然后你还差一个数据库表 就是我做省市区级联的数据库表 这样你就可以做出来省区市级联了
但是博客好像上传不了文件 我只能传一下文件 我传后 附上链接
https://download.csdn.net/download/qq_39234410/10753671
这是数据库文件链接 下载好后 就能做省市区级联了,没积分的留言,我看到发你