xm-select 二级联动 layui

功能描述：

选择第一个下拉框参数将修改第二个下拉框所有参数

效果图：

方法一（稍繁琐）

Html:

   选择部门
     

        
           选择部门
        
      
      

         
           选择部门
         
      
                                 

Js: 

layui.use(['form'], function() {
	form=layui.form;
	form.on('select(dpt1_update)', function(data){
		var val=data.value;
		$.get("url",{"data":val,"level":4},function (data) {
			var list = data;
			var select = document.getElementById('dpt2_update');
			$('#dpt2_update').find('option').remove();
			if (list != null || list.size() > 0) {
				for (var c in list) {
					var option = document.createElement("option");
					option.setAttribute("value", list[c].id);
					option.innerText = list[c].name;
					select.appendChild(option)
				}
			};
			form.render('select');
		},"json");
	});
});

方法二（推荐）

#html部分
	

	


#JS部分	
	var city = xmSelect.render({
        el: '#city',
		data: [
            {name: '苏州', value: 1,selected: true,},
            {name: '南通', value: 2},
        ]
	})
	xmSelect.render({
        el: '#state',
        radio: true,
        data: [
            {name: '江苏', value: 1,selected: true,},
            {name: '广西', value: 2},
        ],
        on:function (data) {
			if(data.change[0].value == 1){
				city.update({
					data: [
						{name: '苏州', value: 1,selected: true,},
						{name: '南通', value: 2},
					],
					autoRow: true,
				})
			}else if(data.change[0].value == 2){
				city.update({
					data: [
						{name: '南宁', value: 1,selected: true,},
						{name: '北海', value: 2},
					],
					autoRow: true,
				})
			}
        }
    })