/**
* 时间:2016年11月27日
* 作者:707200833
* 说明:依赖与jQuery和layui, 是基于layui开发的一个省市区联动的小插件, 使用上要基于layui的表单进行使用
*/ (function($){
var pca = {}; pca.keys = {};
pca.ckeys = {}; pca.init = function(province, city, area,objform,initprovince, initcity, initarea){//jQuery选择器, 省-市-区
if(!province || !$(province).length) return;
$(province).html('');
$(province).append('<option selected>全部</option>');
for(var i in citys){
$(province).append('<option>'+citys[i].name+'</option>');
pca.keys[citys[i].name] = citys[i];
}
//layui.form('select').render();
objform.render('select'); //刷新select选择框渲染
if(initprovince) $(province).next().find('[lay-value="'+initprovince+'"]').click();
if(!city || !$(city).length) return;
pca.formRender(city,objform);
layui.form.on('select(province)', function(data){
var cs = pca.keys[data.value];
$(city).html('');
$(city).append('<option>全部</option>');
if(cs){
cs = cs.city;
for(var i in cs){
$(city).append('<option>'+cs[i].name+'</option>');
pca.ckeys[cs[i].name] = cs[i];
}
$(city).find('option:eq(1)').attr('selected', true);
}
objform.render('select'); //刷新select选择框渲染
$(city).next().find('.layui-this').removeClass('layui-this').click();
pca.formHidden('province', data.value);
$('.pca-label-province').html(data.value);//此处可以自己修改 显示的位置, 不想显示可以直接去掉
});
if(initprovince) $(province).next().find('[lay-value="'+initprovince+'"]').click();
if(initcity) $(city).next().find('[lay-value="'+initcity+'"]').click();
if(!area || !$(area).length) return;
pca.formRender(area,objform);
layui.form.on('select(city)', function(data){
var cs = pca.ckeys[data.value];
$(area).html('');
$(area).append('<option>全部</option>');
if(cs){
cs = cs.area;
for(var i in cs){
$(area).append('<option>'+cs[i]+'</option>');
}
$(area).find('option:eq(1)').attr('selected', true);
}
objform.render('select'); //刷新select选择框渲染
$(area).next().find('.layui-this').removeClass('layui-this').click();
pca.formHidden('city', data.value);
$('.pca-label-city').html(data.value); //此处可以自己修改 显示的位置, 不想显示可以直接去掉
});
layui.form.on('select(area)', function(data){
pca.formHidden('area', data.value);
$('.pca-label-area').html(data.value); //此处可以自己修改 显示的位置, 不想显示可以直接去掉
});
if(initprovince) $(province).next().find('[lay-value="'+initprovince+'"]').click();
if(initcity) $(city).next().find('[lay-value="'+initcity+'"]').click();
if(initarea) $(area).next().find('[lay-value="'+initarea+'"]').click();
} pca.formRender = function(obj,objform){
$(obj).html('');
$(obj).append('<option>全部</option>');
objform.render('select'); //刷新select选择框渲染
} pca.formHidden = function(obj, val){
if(!$('#pca-hide-'+obj).length)
$('body').append('<input id="pca-hide-'+obj+'" type="hidden" value="'+val+'" />');
else
$('#pca-hide-'+obj).val(val);
} window.pca = pca;
return pca;
})($);

//注意 调用方法,传过去一个form对象(layui版本过低, 坑。。。。)

var city={};

        layui.use('form', function () {
var form = layui.form;
pca.init('select[name=P1]', 'select[name=C1]', 'select[name=A1]', form);
});

//加入下拉框改变事件,执行搜索

        layui.form.on('select(area)', function (data) {
pca.formHidden('area', data.value);
$('.pca-label-area').html(data.value); //此处可以自己修改 显示的位置, 不想显示可以直接去掉
$('#btnSearch').click(); //执行搜索事件
});

//加入搜索后值不变 赋值方法

<script type="text/javascript">
var str = $("#txt_json").val();
var citys = JSON.parse(str);
layui.use('form', function () {
var form = layui.form;
pca.init('select[name=A1]', 'select[name=B1]', 'select[name=C1]', form);
rend(form);
});
function rend(form) {
var ABC = $("#txt_type").val();
var A1 = ABC.split(',')[0];
var B1 = ABC.split(',')[1];
var C1 = ABC.split(',')[2]; var selectA1 = $("select[name=A1]");
var keys = {};
var ckeys = {};
$(selectA1).children("option").each(function () {
if ($(this).text() === A1) {
$("select[name=A1]").find('option:eq(' + this.index + ')').attr('selected', true);//设置样式
//--追加数据 for (var i in citys) {
keys[citys[i].name] = citys[i];
}
var cs = keys[A1];
$("select[name=B1]").html('');
$("select[name=B1]").append('<option>全部</option>');
if (cs) {
cs = cs.city;
for (var i in cs) {
$("select[name=B1]").append('<option>' + cs[i].name + '</option>');
ckeys[cs[i].name] = cs[i];
}
//$("select[name=B1]").find('option:eq(0)').attr('selected', true);
}
}
});
form.render('select'); //刷新select选择框渲染
var selectB1 = $("select[name=B1]");
$(selectB1).children("option").each(function () {
if ($(this).text() === B1) {
$("select[name=B1]").find('option:eq(' + this.index + ')').attr('selected', true);
var cs = ckeys[B1]; //获得B1的子集
$("select[name=C1]").html('');
$("select[name=C1]").append('<option>全部</option>');
if (cs) {
cs = cs.area;
for (var i in cs) {
$("select[name=C1]").append('<option>' + cs[i] + '</option>');
}
// $(area).find('option:eq(1)').attr('selected', true); //设置默认选中值
}
}
});
form.render('select'); //刷新select选择框渲染
var selectC1 = $("select[name=C1]");
$(selectC1).children("option").each(function () {
if ($(this).text() === C1) {
$("select[name=C1]").find('option:eq(' + this.index + ')').attr('selected', true);
}
});
form.render('select'); //刷新select选择框渲染
} </script>

弄了半天 ..擦

        //触发下拉框首个单击事件
var sele = $("#selDepartment").next().find("dd");
$(sele[0]).trigger("click");

触发dd事件

关于layui 三级联动 渲染报错解决方法的更多相关文章

  1. eclipse创建的maven项目,pom.xml文件报错解决方法

    [错误一:]maven 编译级别过低 [解决办法:] 使用 maven-compiler-plugin 将 maven 编译级别改为 jdk1.6 以上: <!-- java编译插件 --> ...

  2. MyEclipse Server view报错解决方法

    MyEclipse Server view报错解决方法 方法/步骤     启动MyEclipse,弹出一个框,报错. ---------------------------------------- ...

  3. Loadrunner参数化逗号报错解决方法

    Loadrunner参数化逗号报错解决方法     介绍Loadrunner参数化时,参数中包含有逗号时出错的解决方法. 在Loadrunner进行参数化时,参数中如果含有逗号,编辑保存后会报错: 此 ...

  4. Android Studio support 26.0.0-alpha1 Failed to resolve: com.android.support:appcompat-v7:27.+ 报错解决方法

    AS下如何生成自定义的.jks签名文件, 以及如何生成数字签名 链接:http://www.cnblogs.com/smyhvae/p/4456420.html 链接:http://blog.csdn ...

  5. iOS url带中文下载时 报错解决方法

    问题描述:下载文件时, 请求带中文的URL的资源时,比如:http://s237.sznews.com/pic/2010/11/23/e4fa5794926548ac953a8a525a23b6f2/ ...

  6. jquery jssdk分享报错解决方法

    jssdk分享报错解决方法 一般都是参数传错了

  7. django.db.utils.InternalError: (1060, "Duplicate column name 'user_id'")迁移报错解决方法

    django.db.utils.InternalError: (1060, "Duplicate column name 'user_id'")迁移报错解决方法 django.db ...

  8. create-react-app创建项目后,运行npm run eject报错解决方法

    运行npm run eject报错解决方法 主要问题是脚手架添加.gitgnore文件,但是却没有本地仓库,使用以下命令操作以下就可以了 git init git add . git commit - ...

  9. 打开struts-config.xml 报错 解决方法Could not open the editor

    打开struts-config.xml 报错 解决办法Could not open the editor 错误信息:Could not open the editor: Project XXX is ...

随机推荐

  1. 01 c++常见面试题总结

    https://www.cnblogs.com/yjd_hycf_space/p/7495640.html   C++常见的面试题 http://c.tedu.cn/workplace/217749. ...

  2. svg文件报错

    错误:The content of element type "font-face" is incomplete, it must match "((font-face- ...

  3. Linux学习笔记之1——文件和目录管理(硬连接和软连接)(连结档,相当于快捷方式)

    在这节将要学习linux的连接档,在之前用"ls -l" 查看文件属性的命令时, 其中第二个属性是连接数.那么这个连接数是干什么的?这就要理解inode. 先说一下文件是怎么存储的 ...

  4. raize5的修改。

    ( ( ; Col1: $; Col2: $; Col3: $; Col4: $ ), ( ; Col1: $; Col2: $FA; Col3: $; Col4: $ ), ( ; Col1: $C ...

  5. 【ZOJ 4067】Books

    [链接] 我是链接,点我呀:) [题意] [题解] 统计a中0的个数cnt0 然后m减去cnt0 因为这cnt0个0是一定会取到的. 如果m==0了 那么直接找到数组中的最小值mi 输出mi-1就好 ...

  6. Java Web学习总结(22)——使用kaptcha生成验证码

    kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小.颜色.显示的字符等等.下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验. 一.搭建测试环境 ...

  7. 洛谷 P1198 BZOJ 1012 [JSOI2008]最大数

    题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 :把某个节点 x 的点权增加 a .操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 ...

  8. 1103 N的倍数

    1103 N的倍数  题目来源: Ural 1302 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 一个长度为N的数组A,从A中选出若干个数,使得 ...

  9. Android ORM——初识greenDAO 3及使用greenDAO 3前应该掌握的一些知识点(一)

    引言 总所周知,SQLite--内嵌于Android中一个占用内存极小的关系型,作为我们Android存储领域中重要的一员 ,或多或少都曾接触到数据库.即使Android系统中提供了很多操作SQLit ...

  10. Android传统HTTP请求get----post方式提交数据(包括乱码问题)

    1.模仿登入页面显示(使用传统方式是面向过程的) 使用Apache公司提供的HttpClient  API是面向对象的 (文章底部含有源码的连接,包括了使用async框架) (解决中文乱码的问题.主要 ...