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