/** * 时间: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事件