jQuery写省市区级联和理论多级级联和select下拉框删除除了第一行的所有option

写这篇文章是因为我在网上找了很多级联可是代码太繁琐还经常出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

这是数据库文件链接下载好后就能做省市区级联了

jQuery写省市区级联和理论多级级联 和select下拉框删除除了第一行的所有option

猜你喜欢

jQuery写省市区级联和理论多级级联和select下拉框删除除了第一行的所有option