关于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事件

浙公网安备 33010602011771号