使用vue框架实现部门大区二级联动

最新推荐文章于 2024-06-04 08:06:17 发布

故人报剑归

最新推荐文章于 2024-06-04 08:06:17 发布

阅读量2.3k

点赞数

分类专栏： vue.js 文章标签： Vue.js 二级联动 java

本文链接：https://blog.csdn.net/windasix/article/details/78421159

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近项目用到vue.js，研究了半天，用vue写了一个部门大区的二级联动，发现工具真是好用，比以前少了很多代码，记录下来也方便自己以后查阅，下面是代码

<script type="text/javascript">
    $(function(){
        loadfirst(0);
    });
		
    function sub(id){
	loadfirst(id);
    }	
		
    function loadfirst(pid){
	$.ajax({
	    type:"post",
	    url:"testurl.action?pid="+pid,
	    dataType:"json",
	    success:function(data){
                //id为0时为父类
               if(pid==0){
	            vm.mcs=data;								
	        }else{
	            vm2.mcs=data;
	        }
            }		
        });	
    }
</script>
  </head>
  <body>
    <div id="sel"  v-cloak>
        //部门，第一个select框
       <select id="dqsel" >
    		<option>-请选择-</option>
    		<option v-for="mc in mcs" v-bind:value="mc.id" @click="sub(mc.id)">{{mc.name}}</option>
    	</select>  	
        //大区，第二个select框
    	<select id="bmsel">
    		<option>-请选择-</option>
    		<option v-for="mc in mcs" v-bind:value="mc.id">{{mc.name}}</option>
    	</select>
    </div>   
  </body>
  <script type="text/javascript">
	var vm = new Vue({
            el:'#dqsel',
	    data:{
                mcs : [],
	    }
	});
		
	var vm2 = new Vue({
	    el:'#bmsel',
	    data:{
		 mcs : [],
            }
	});		
  </script>

//测试类
public class test {
	private int id;			//主键
	
	private String name;	//名称
	private int pid;		//父id,当为0时是顶级父类
	
	public int getId() {
		return id;
	}
	public String getName() {
		return name;
	}
	public int getPid() {
		return pid;
	}
	public void setId(int id) {
		this.id = id;
	}
	public void setName(String name) {
		this.name = name;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}	
}





testurl查询的是pid为从页面传过去的值的集合，第一次是0，查询的是所有顶级父类，第二次会根据第一次select框选中的id到后台查询数据库中pid为该id的集合，三级联动以此类推


PS：发现空格和Tap缩进区别好大，习惯用tap缩进，复制到编辑器直接乱。以后要注意

故人报剑归

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用vue框架实现部门大区二级联动

最近项目用到vue.js，研究了半天，用vue写了一个部门大区的二级联动，发现工具真是好用，比以前少了很多代码，记录下来也方便自己以后查阅，下面是代码 $(function(){ loadfirst(0); }); function sub(id){ loadfirst(id); } function loadfirst(
复制链接

扫一扫