基于layui 2.0的二级联动

html如下:

 <div class="layui-form-item">
	                    <label class="layui-form-label"> <span class="x-red">*span>分类label>
							<div class="layui-input-inline">
								<select name="fileType"  lay-filter="test" onchange="alert(this.value)"  class="layui-select fileTypeSelect" required="" lay-verify="required">
									<option value="-1">option>
								select>
							div>
							
							<div class="layui-input-inline">
								<select name="fileMajor" class="layui-select fileMajorSelect" required="" lay-verify="required">
									<option >option>
								select>
							div>
	                  div>

如下:

var form;
layui.use(['form','layer','jquery','laydate'],function(){
		form = layui.form,
		layer = parent.layer === undefined ? layui.layer : parent.layer,
		laydate=layui.laydate,
		laypage = layui.laypage;
		$ = layui.jquery;
		
		var app = new Vue({
			el:"#app",
			data: {
				list: {}
			},
			methods: {
				/*loadMajor:function(tid){
					function loadMajor(tid);
				}*/
			},
			created: function() {
				loadTypeList();
			}
		})
	
		//显示文件专业列表
		form.on('select(test)', function(data){
			//console.log(data.elem); //得到select原始DOM对象
			//console.log(data.value); //得到被选中的值
			//console.log(data.othis); //得到美化后的DOM对象
			
			sendRequest("POST", "major/MajorServlet",{
				"m": "mlist","tid":data.value
			}, function(result) {
				console.log(result.data);
				if(result.code == 0){
					var fileMajor = $("select[name='fileMajor']");
					var optionLength =fileMajor.children().length;//取得option的长度
					console.log(optionLength);
					if(optionLength>=1){
						fileMajor.find("option").remove(); 
					}
					for(var i = 0; i < result.data.length; i++) {
					var major = result.data[i];
					if(major.mname !=null && major.mname!=""){
					//组装选项
					var opt = " + major.mname + "";
					//添加到选项中
					fileMajor.append(opt);
					}
				}
					//表单重新渲染
					form.render('select');
				}else if(result.code == 1) {
					layer.msg("未找到分类数据");
			}
		});
	});
	
		//文件类型列表
		function loadTypeList() {
			sendRequest("POST", "type/TypeServlet", {
				"m": "list"
			}, function(result) {
				if(result.code == 0) {
				//console.log(result.data);
				//找到分类下拉框
				var fileType = $("select[name='fileType']");
				for(var i = 0; i < result.data.length; i++) {
					var type = result.data[i];
					//组装选项
					var opt = " + type.tname + "";
					//添加到选项中
					fileType.append(opt);
				}
				
				//表单重新渲染
				form.render('select');
			} else if(result.code == 1) {
				layer.msg("未找到分类数据");
			}
		});
	}
});

	});



你可能感兴趣的:(基于layui 2.0的二级联动)