xm-select 二级联动 layui

功能描述：

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

效果图：

方法一（稍繁琐）

Html:

<div class="layui-inline">
   <label class="layui-form-label">选择部门</label>
     <div class="layui-input-inline">
        <select  class="form-control" id="dpt1_update" lay-filter="dpt1_update" name="dpt1">
           <option value="">选择部门</option>
        </select>
      </div>
      <div class="layui-input-inline">
         <select  class="form-control" id="dpt2_update" lay-filter="dpt2_update" name="dpt2">
           <option value="">选择部门</option>
         </select>
      </div>
</div>                                 

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部分
	<div id="state"></div>
	<div id="city"></div>

#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,
				})
			}
        }
    })