layui 实现二级联动

html 部分

        <div class="layui-form-item">
            <label class="layui-form-label">选择省市</label>
            <div class="layui-input-inline">
              <select name="province" lay-filter="magazine">
                <option value="">请选择省</option>
                {foreach $provinceList as $key=>$val}
                <option value="{$val.city_id}">{$val.name}</option>
                {/foreach}
              </select>
            </div>
            <div class="layui-input-inline">
              <select name="city">
                <option value="">请选择市</option>
              </select>
            </div>
          </div>

<script>
    layui.use('form', function(){
        var form = layui.form;
        form.on('select(magazine)', function(data){
            var areaId=data.elem.value;
            $.ajax({
                type: 'POST',
                url: "/api/member/getCity",
                data: {parent_id:areaId},
                dataType:  'json',
                success:function(e){
                    console.log(e.data);
                    //empty() 方法从被选元素移除所有内容
                    $("select[name='city']").empty();
                    var html = "<option value=''>请选择市<option>";
                    $(e.data).each(function (v, k) {
                        html += "<option value='" + k.city_id + "'>" + k.name + "</option>";
                    });
                    //把遍历的数据放到select表里面
                    $("select[name='city']").append(html);
                    //从新刷新了一下下拉框
                    form.render('select');      //重新渲染
                }
            });
        });
 
    });
</script>