/**
* 时间: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. jsp页面获取服务器Ip地址等数据

    废话不多说,直接上代码 <%@ page language="java" import="java.util.*" pageEncoding=" ...

  2. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...

  3. vue项目初始化结构

  4. 洛谷 P1692 部落卫队

    P1692 部落卫队 题目描述 原始部落byteland中的居民们为了争夺有限的资源,经常发生冲突.几乎每个居民都有他的仇敌.部落酋长为了组织一支保卫部落的队伍,希望从部落的居民中选出最多的居民入伍, ...

  5. installed jre指向jdk而非jre位置&

    1.eclipse菜单 - Window - Preferences- Java - Installed JREs 将配置的JRE定位到JDK,例如JRE home:D:\Program Files ...

  6. HDU 5174

    题意有点不明白,因为MAX为int最大值,推测为64位,AC #include <cstdio> #include <iostream> #include <cstrin ...

  7. codechef Little Elephant and Bombs题解

    The Little Elephant from the Zoo of Lviv currently is on the military mission. There are N enemy bui ...

  8. TagCloud with xml

    Django后台开发 加了个3D标签云的插件 3DTagCloudwithXML 中使用的是xml生成方式 为了xml自己主动化生成 而不须要去手工改动xml 特地写了个xmlgenerator 比較 ...

  9. expdp impdp 数据库导入导出命令具体解释

    一.创建逻辑文件夹,该命令不会在操作系统创建真正的文件夹.最好以system等管理员创建. create directory dpdata1 as 'd:\test\dump'; 二.查看管理理员文件 ...

  10. Windows XP时代终结:假设你还在用它怎么办

    2014 年 4 月 8 日.是Windows XP退休的日子. 4 月 8 日过后,Windows XP 的安全性更新将停止了. watermark/2/text/aHR0cDovL2Jsb2cuY ...