/**
* 时间: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. POJ3069 Saruman's Army【贪心】

    Saruman the White must lead his army along a straight path from Isengard to Helm's Deep. To keep tra ...

  2. [Ynoi2011]D1T1

    题目大意: 给定一个序列$a_1,a_2,\dots,a_n$,进行$m$次操作,每次操作如下: 1. 给定$x,y,z$,对所有下标为$y,y+x,y+2x,\dots$的元素加上$z$(保证$y\ ...

  3. 37.query string、_all metadata

    主要知识点 1.query string基础语法 2._all metadata的理解     一.query string基础语法 1.GET /test_index/test_type/_sear ...

  4. 利用Socket 客户端---->服务端 传送文件到指定路径,并返回一个友好的回馈

    首先盲写的一个传输文件的方法,但测试发现了一个非常不容易发现的问题,这里先说明一下. 错误的代码如下: package com.TCP.java; import java.io.File; impor ...

  5. 【ACM】poj_2080_Calendar_201307311043

    CalendarTime Limit: 1000MS  Memory Limit: 30000K Total Submissions: 9787  Accepted: 3677 Description ...

  6. [bzoj4659\2694]Lcm_数论_莫比乌斯反演

    Lcm bzoj-4659 bzoj-2694 题目大意:给出A,B,考虑所有满足l<=a<=A,l<=b<=B,且不存在n>1使得n^2同时整除a和b的有序数对(a,b ...

  7. [DLX精确覆盖] hdu 3663 Power Stations

    题意: 给你n.m.d,代表有n个城市.m条城市之间的关系,每一个城市要在日后d天内都有电. 对于每一个城市,都有一个发电站,每一个发电站能够在[a,b]的每一个连续子区间内发电. x城市发电了.他相 ...

  8. Java异常的处理机制(二)

    1.throw的作用 class Usre { private int age; public void setAge (int age) { if(age < 0) { RuntimeExce ...

  9. 怎样在QML中使用multitouch

    在Qt QML中.它能够利用multitouch来做一些我们想做的事情.在今天的文章中.我们将介绍怎样使用multitouch来做一些我们想做的事. 事实上,在QML中利用多点触控是很easy的一件事 ...

  10. C语言数组和函数实例练习(二)

    1.C语言中不允许函数的嵌套定义,但可以使用函数的嵌套调用. 例1:输入4个整数,找出其中最大的数. #include <stdio.h> #include <stdlib.h> ...