文档章节

layer表单元素 三级联动 省市县选择框动态渲染问题解决

甄佰匠人
 甄佰匠人
发布于 2017/08/08 11:29
字数 478
阅读 83
收藏 0

$(document).ready(function() {

layui.use(['layer', 'form'], function(){

var layer = layui.layer

,form = layui.form();

//获取省市县value

var isprovince = $('#area').attr('province');

var iscity = $('#area').attr('city');

var isdistrict = $('#area').attr('district');

var ajaxUrl = "../../ajax/get-city-list";

//选择省份

$("#province option").each(function(){

var $me = $(this);

        if($me.val() == isprovince) {

        $me.attr("selected",true);

        }else{

        $me.attr("selected",false);

        }

});

//请求当前省份的所有市区

$.ajax({

type: "get",

url: ajaxUrl,

async: true,

data: {

"fid": isprovince

},

dataType: "json",

success: function(data) {

//渲染市区

$("#city").html("");

$("#city").append("<option value=''>请选择市</option>");

$.each(data, function(i, n) {

$("#city").append("<option value='" + n.area_id + "'>" + n.name + "</option>");

});

//选择市区

$("#city option").each(function(){

var $my = $(this);

        if($my.val() == iscity) {

        $my.attr("selected",true);

        }else{

        $my.attr("selected",false);

        }

});

//最后重新渲染

form.render('select');

},

error: function() {

alert("错误");

}

});

//请求当前市区的所有县

$.ajax({

type: "get",

url: ajaxUrl,

async: true,

data: {

"fid": iscity

},

dataType: "json",

success: function(data) {

//渲染县

$("#district").html("");

$("#district").append("<option value=''>请选择县/区</option>");

$.each(data, function(i, n) {

$("#district").append("<option value='" + n.area_id + "'>" + n.name + "</option>");

})

//选择县

$("#district option").each(function(){

var $one = $(this);

        if($one.val() == isdistrict) {

        $one.attr("selected",true);

        }else{

        $one.attr("selected",false);

        }

});

//最后重新渲染

form.render('select');

}

});

$('.js-sign').on('click', function() {

layer.open({

type: 2,

area: ['910px', '959.7px'],

title: ['签到','text-align:center,font-size:18px'],

content: ['/admin/sign/to-sign-page','no'], //不出现滚动条,content: ['http:', 'no']

anim:1,

closeBtn: 2

});

});

});

$('.btnsub').on('click',function(){

var province = $('#province+div .layui-this').attr('lay-value');

var city = $('#city+div .layui-this').attr('lay-value');

var district = $('#district+div .layui-this').attr('lay-value');

var disease = $('#disease').text();

$.ajax({

url:'/admin/user/save-user-data',

type:'post',

dataType:'json',

data:{province:province,city:city,district:district,common_diseases:disease},

beforeSend:function(){

layer.msg('正在保存...');

$('.btnsub').attr({disabled:"disabled"});

$('.btnsub').text('正在保存');

},

success:function(res){

if(res.code == 1){

    layer.msg('保存成功!');

}else{

layer.msg('error');

}

},

complete: function(){

$(".btnsub").removeAttr("disabled");

$('.btnsub').text('保存');

},

error : function(XMLHttpRequest, textStatus, errorThrown) {

layer.msg('网络失败,请刷新页面后重试');

}

});

});

});

 

<div class="layui-form-item">

<label class="layui-form-label">省/市/区</label>

<div class="layui-input-block">

<div class="layui-input-inline">

<select name="province" lay-verify="province" lay-filter="province"

id="province">

<option value="">请选择省</option>

                

                <?php foreach ($provinceList as $key => $value):?>

                 <option value="<?= $value['area_id'] ?>"><?= $value['name'] ?></option>

                <?php endforeach;?>

              </select>

</div>

<div class="layui-input-inline">

<select name="city" lay-filter="city" id="city">

<option value="">请选择市</option>

</select>

</div>

<div class="layui-input-inline">

<select name="district" lay-filter="district" id="district">

<option value="">请选择县/区</option>

</select>

</div>

</div>

</div>

© 著作权归作者所有

甄佰匠人
粉丝 3
博文 154
码字总数 86632
作品 0
浦东
程序员
私信 提问
reactjs省市县三级联动

如何使用ReactJs+Relay+GraphQL,实现省市县三级联动的组件? 1、使用json模拟服务器端的数据 [ { "id": "1001", "name": "北京市", "children": [ { "id": "1001001", "name": "北京市", "c......

liyuanyuan
2016/10/14
976
0
众邦科技/CRMEB微信小程序商城

CRMEB客户管理+电商管理系统 本项目还在不断开发完善中,如有建议或问题请在这里提出 如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! 帮助文档 公众号和小程序打通版 https://gitee....

众邦科技
01/11
0
0
优化省市县三级联动(查询数据库)

javaWeb项目,页面实现省市县三级联动。 想到三种方法: 1.查询出所有省并显示,选择省或市,利用ajax从后台查询出对应数据,再显示。 2.查询出所有省市县,数据隐藏到页面,jquery实现联动显...

田野_7
2016/05/30
999
6
dwz 三级联下拉菜单怎么赋值(combox组件)

用DWZ做的省市县三级联动下拉框,保存值之后编辑的时候怎么赋值聚焦呢

纯24K爷们儿
2014/05/14
1K
2
js城市三级联动效果

重点就是全国城市的json数据,逻辑就是简单的循环查找和返回对应索引。 加入变换事件的回调处理接口。 效果截图和下载地址:js城市三级联动效果下载地址 部分代码,运行前需要加入json格式城...

透笔度
2016/05/27
222
0

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
15
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
10
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
14
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部