layui 省市区三级联动

浪淘沙11个月前前端72

image.png

 <div class="layui-form-item">
     <label class="layui-form-label">学校所在地:<font color="red">*</font></label>
     <div class="layui-input-inline">
         <select name="sf" id="sf" lay-verify="required" lay-filter="sf">
             <option value="">请选择省</option>
             @Html.Raw(Model.sb.ToString())
         </select>
     </div>
     <div class="layui-input-inline">
         <select name="ds" id="ds" lay-verify="required" lay-filter="ds">
             <option value="">请选择市</option>
            
         </select>
     </div>
     <div class="layui-input-inline" >
         <select name="xq" id="xq" lay-filter="xq" lay-verify="required">
             <option value="">请选择县/区</option>
            
         </select>
     </div>
   
 </div>
// select 事件
form.on('select(sf)', function (data) {
    var elem = data.elem; // 获得 select 原始 DOM 对象
    var value = data.value; // 获得被选中的值
    var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
    //layer.msg(this.innerHTML + ' 的 value: ' + value); // this 为当前选中 <option> 元素对象
    $.ajax({
        url: "/api/manage/GetStaList/" + value,
        type: "POST",
       
        success: function (response) {
           
            var data = response.data;
            // console.log(data);

            // 清空 select 选项
            $("#ds").empty(); // 清空 select 的所有选项
            $("#xq").empty();
            $('#ds').append('<option value="">请选择市</option>'); // 添加默认选项
            $('#xq').append('<option value="">请选择县/区</option>'); // 添加默认选项
          

            for (var i = 0; i < data.length; i++) {
                $("#ds").append("<option value='" + data[i].dictno + "'>" + data[i].dictName + "</option>");
            }
            // 重新渲染 select
            layui.form.render('select');

        }
    });
    
});
form.on('select(ds)', function (data) {
    var elem = data.elem; // 获得 select 原始 DOM 对象
    var value = data.value; // 获得被选中的值
    var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
   
    $.ajax({
        url: "/api/manage/GetStaList/" + value,
        type: "POST",
     
        success: function (response) {

            var data = response.data;
            // console.log(data);

            // 清空 select 选项                
            $("#xq").empty();                  
            $('#xq').append('<option value="">请选择县/区</option>'); // 添加默认选项


            for (var i = 0; i < data.length; i++) {
                $("#xq").append("<option value='" + data[i].dictno + "'>" + data[i].dictName + "</option>");
            }
            // 重新渲染 select
            layui.form.render('select');

        }
    });

});
#region 读取省市数据
/// <summary>
/// 读取省市数据
/// </summary>
/// <param name="dictno">编码</param>
/// <returns></returns>
[Route("GetStaList")]
[HttpPost]
public async Task<object> GetStaList(string dictno)
{
    string sql = "select DictName,dictno from pub_sta_Class where DictNo like '" + FunHelper.FilerForm(dictno) + "%' and len(dictno)=" + (dictno.Length + 4) + " and lock=1 order by dictno asc";           

    var dt = await _db.Ado.GetDataTableAsync(sql);

    return dt;
}
#endregion


相关文章

Element Plus 步骤条el-steps 设置simple时,箭头换成横线

@page @model xxtsoft.Web.Entry.Pages.hr.regModel @{     Layout =&nb...

layui table后端接口html代码,前端显示

  , { field: 'dwbq', title: '单位标签', width:&n...

vxe-table 改变每一列颜色值

<div id="app">     <div class="table-responsi...

layui form提交时,弹出确认框

layui form提交时,弹出确认框

<div class="container yx-form">     <form c...

asp.net core razor 提交按钮时提示信息

<div class="layui-fluid  paneltop20">     <...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。