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

系统管理员 2022-05-15 15:51 116阅读 0赞

写这篇文章  是因为我在网上找了很多级联  可是代码太繁琐  还经常出bug   然后决定自己研究一下  然后记录下来  其实省市区级联没有想象的那么难  多级级联也是

先看一下效果图

这是初始化页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjM0NDEw_size_16_color_FFFFFF_t_70][]

这是选完以后的界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjM0NDEw_size_16_color_FFFFFF_t_70 1][]

我先说一下中间碰到的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_blog.csdn.net_qq_39234410_article_details_83150156]

然后你还差一个数据库表  就是我做省市区级联的数据库表  这样你就可以做出来省区市级联了

但是博客好像上传不了文件  我只能传一下文件  我传后  附上链接

[https://download.csdn.net/download/qq\_39234410/10753671][https_download.csdn.net_download_qq_39234410_10753671]

这是数据库文件链接  下载好后  就能做省市区级联了，没积分的留言，我看到发你

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjM0NDEw_size_16_color_FFFFFF_t_70]: /images/20220503/41e489cd5a1b42e380f1663b3b241420.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjM0NDEw_size_16_color_FFFFFF_t_70 1]: /images/20220503/f0798812deac410f91c739625aafd4f3.png
[https_blog.csdn.net_qq_39234410_article_details_83150156]: https://blog.csdn.net/qq_39234410/article/details/83150156
[https_download.csdn.net_download_qq_39234410_10753671]: https://download.csdn.net/download/qq_39234410/10753671