关于layui 三级联动 渲染报错解决方法
/**
* 时间: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 三级联动 渲染报错解决方法的更多相关文章
- eclipse创建的maven项目,pom.xml文件报错解决方法
[错误一:]maven 编译级别过低 [解决办法:] 使用 maven-compiler-plugin 将 maven 编译级别改为 jdk1.6 以上: <!-- java编译插件 --> ...
- MyEclipse Server view报错解决方法
MyEclipse Server view报错解决方法 方法/步骤 启动MyEclipse,弹出一个框,报错. ---------------------------------------- ...
- Loadrunner参数化逗号报错解决方法
Loadrunner参数化逗号报错解决方法 介绍Loadrunner参数化时,参数中包含有逗号时出错的解决方法. 在Loadrunner进行参数化时,参数中如果含有逗号,编辑保存后会报错: 此 ...
- 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 ...
- iOS url带中文下载时 报错解决方法
问题描述:下载文件时, 请求带中文的URL的资源时,比如:http://s237.sznews.com/pic/2010/11/23/e4fa5794926548ac953a8a525a23b6f2/ ...
- jquery jssdk分享报错解决方法
jssdk分享报错解决方法 一般都是参数传错了
- django.db.utils.InternalError: (1060, "Duplicate column name 'user_id'")迁移报错解决方法
django.db.utils.InternalError: (1060, "Duplicate column name 'user_id'")迁移报错解决方法 django.db ...
- create-react-app创建项目后,运行npm run eject报错解决方法
运行npm run eject报错解决方法 主要问题是脚手架添加.gitgnore文件,但是却没有本地仓库,使用以下命令操作以下就可以了 git init git add . git commit - ...
- 打开struts-config.xml 报错 解决方法Could not open the editor
打开struts-config.xml 报错 解决办法Could not open the editor 错误信息:Could not open the editor: Project XXX is ...
随机推荐
- Bamboo Django Celery定时任务和时间设置
1.Celery加入定时任务 Celery除了可以异步执行任务之外,还可以定时执行任务.在实例代码的基础上写个测试方法: 1 #coding:utf-8 2 from celery.task.sche ...
- 多种方法爬取猫眼电影Top100排行榜,保存到csv文件,下载封面图
参考链接: https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/83663400 https://www.makcyun.top/web_sc ...
- Vue主要原理最简实现与逻辑梳理
Vue的主要原理中主要用到了定义的这么几个函数Dep,Watcher,observer.我们来使用这几个函数简单的实现一下vue构造函数数据绑定和相互依赖部分,梳理一下它们之间的关系.省略了编译部分和 ...
- elasticsearch 权威指南排序阅读笔记(六)
默认排序 默认查询是通过_source 准确性权重来排序 字段排序 { "query":{ "match":{ "productName": ...
- 洛谷——P1094 纪念品分组
https://www.luogu.org/problem/show?pid=1094#sub 题目描述 元旦快到了,校学生会让乐乐负责新年晚会的纪念品发放工作.为使得参加晚会的同学所获得 的纪念品价 ...
- IP地址的规划和设计方法(三)
九,内部网络专用IP地址规划与网络地址转换NAT方法 (1)内部网络的专用IP地址选择的根据 RFC1918在讨论内部网络的专用IP地址规划方法时任务.使用专用地址规划一个内部网络地址系统时.首选的方 ...
- codechef Little Elephant and Bombs题解
The Little Elephant from the Zoo of Lviv currently is on the military mission. There are N enemy bui ...
- IA32 MMU paging初始化代码
写了一段IA32 paging通用构造代码.有须要的.能够拿去 #define PDE_FLG_RW (1<<1) #define PDE_FLG_US (1<<2) #def ...
- 简陋版:基于python的自动化测试框架开发
项目背景: XXXX银行项目采用的是B/S架构,主要是为了解决银行业务中的柜员.凭证.现金.账务等来自存款.贷款.会计模块的管理. 手工弊端: 1.项目业务复杂度高,回归测试工作量大2.单个接口功能比 ...
- Java高级程序猿技术积累
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveDczNDQwMDE0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...