sunpengcheng_branch
spc 6 months ago
parent fbdbf96c14
commit 6e65df18ad

@ -1,147 +1,164 @@
layui.define(['jquery', 'layer'], function (exports){ layui.define(['jquery', 'layer'], function (exports){ // 定义一个模块,依赖 'jquery' 和 'layer'
var $ = layui.jquery; var $ = layui.jquery; // 使用 layui 的 jQuery
var chekedArr = {}; var chekedArr = {}; // 初始化一个空对象用于存储选中的过滤项
var layfilter = {
render:function(options){ var layfilter = { // 定义 layfilter 对象
var url = options.url; render:function(options){ // 渲染过滤组件的方法
var flag = true; var url = options.url; // 获取传入的 url 地址
//传入了地址,则直接将此地址覆盖 var flag = true; // 初始化标志位,用于控制是否继续渲染
// 如果传入了 url则从该地址获取数据
if(url){ if(url){
$.getJSON(url,options.where,function(res){ $.getJSON(url, options.where, function(res){ // 通过 GET 请求获取 JSON 数据
if(res.code == 0){ if(res.code == 0){ // 如果返回的 code 为 0表示成功
var data = res.data; var data = res.data; // 获取返回的数据
flase = true; flase = true; // 设置标志位为 true
layfilter.init(options,data); layfilter.init(options, data); // 调用 init 方法,传入选项和数据进行初始化
}else{ }else{
layer.msg(res.msg||'查询过滤组件数据异常',{icon:2}); layer.msg(res.msg || '查询过滤组件数据异常', {icon: 2}); // 显示错误信息
flag = false flag = false; // 如果失败,设置 flag 为 false
} }
}) });
} }
if(!flag){ if(!flag){ // 如果 flag 为 false直接返回不执行后续操作
return; return;
} }
}, },
init:function(options,dataSource){ init:function(options, dataSource){ // 初始化过滤组件的方法
var elem = options.elem; var elem = options.elem; // 获取传入的元素
var $dom = $(elem); var $dom = $(elem); // 获取该元素的 jQuery 对象
var itemWidth = options.itemWidth var itemWidth = options.itemWidth; // 获取项的宽度
var arr = {}; var arr = {}; // 初始化一个空对象,用于存储选中的项
var $table = $('<table class="filterTable"></table>'); var $table = $('<table class="filterTable"></table>'); // 创建一个新的表格元素
for(var i=0;i<dataSource.length;i++){
var $tr =$('<tr></tr>'); // 遍历数据源,生成每一行
var $td1 = $('<td class="item-title">'+dataSource[i].title+':</td>'); for(var i = 0; i < dataSource.length; i++){
var $td2 = $('<td class="items"></td>'); var $tr = $('<tr></tr>'); // 创建表格行
var type = dataSource[i].type; var $td1 = $('<td class="item-title">' + dataSource[i].title + ':</td>'); // 创建第一列(标题)
if(!type){ var $td2 = $('<td class="items"></td>'); // 创建第二列(选项列表)
console.warn('第'+(i+1)+'个元素的类型[type]为空设为默认值[radio]'); var type = dataSource[i].type; // 获取当前项的类型
if(!type){ // 如果没有设置类型,默认为 'radio'
console.warn('第' + (i + 1) + '个元素的类型[type]为空设为默认值[radio]');
type = 'radio'; type = 'radio';
} }
var $ul = $('<ul class="layfilter-ul" type="'+type+'" name="'+dataSource[i].name+'"></ul>'); var $ul = $('<ul class="layfilter-ul" type="'+type+'" name="'+dataSource[i].name+'"></ul>'); // 创建列表元素
var width = itemWidth && itemWidth.length>0 ? (itemWidth.length>i ? itemWidth[i]:itemWidth[itemWidth.length-1]):80;
arr[dataSource[i].name]=[]; // 如果传入了项宽度,则根据索引设置宽度,否则默认为 80
for(var j=0;j<dataSource[i].data.length;j++){ var width = itemWidth && itemWidth.length > 0 ? (itemWidth.length > i ? itemWidth[i] : itemWidth[itemWidth.length - 1]) : 80;
var item = dataSource[i].data; arr[dataSource[i].name] = []; // 初始化存储选中的项的数组
var className = 'layfilter-item';
if(item[j].checked && item[j].checked=='true'){ // 遍历当前项的数据,生成每一个选项
for(var j = 0; j < dataSource[i].data.length; j++){
var item = dataSource[i].data;
var className = 'layfilter-item'; // 默认项的类名
// 如果该项已被选中,则添加选中类
if(item[j].checked && item[j].checked == 'true'){
className = "layfilter-item layfilter-item-checked"; className = "layfilter-item layfilter-item-checked";
arr[dataSource[i].name].push({name:item[j].name,value:item[j].value}); arr[dataSource[i].name].push({name: item[j].name, value: item[j].value}); // 将选中的项添加到选中数组
} }
//判断是否禁用
if(item[j].disabled && item[j].disabled=='true'){ // 判断该项是否被禁用
if(item[j].disabled && item[j].disabled == 'true'){
// 如果禁用,添加禁用样式
$ul.append('<li value="'+item[j].value+'" style="width:'+width+'px;height: 28px;line-height: 28px;" class="'+className+'"><a disabled="disabled" class="layui-disabled">'+item[j].name+'</a></li>'); $ul.append('<li value="'+item[j].value+'" style="width:'+width+'px;height: 28px;line-height: 28px;" class="'+className+'"><a disabled="disabled" class="layui-disabled">'+item[j].name+'</a></li>');
}else{ }else{
// 如果未禁用,正常添加项
$ul.append('<li value="'+item[j].value+'" style="width:'+width+'px;height: 28px;line-height: 28px;" class="'+className+'"><a>'+item[j].name+'</a></li>'); $ul.append('<li value="'+item[j].value+'" style="width:'+width+'px;height: 28px;line-height: 28px;" class="'+className+'"><a>'+item[j].name+'</a></li>');
} }
} }
// 将列表添加到第二列,并将整行添加到表格中
$td2.append($ul); $td2.append($ul);
$tr.append($td1).append($td2); $tr.append($td1).append($td2);
$table.append($tr); $table.append($tr);
} }
$dom.append($table);
chekedArr=arr; $dom.append($table); // 将表格添加到指定的 DOM 元素中
//注册点击事件 chekedArr = arr; // 更新选中的项
$('.filterTable tr td li a').bind('click',function(){
if($(this).attr('disabled')){ // 注册点击事件,处理项的选中与取消选中
$('.filterTable tr td li a').bind('click', function(){
if($(this).attr('disabled')){ // 如果该项禁用,返回不做处理
return; return;
} }
var itemType = $(this).parent().parent().attr('type');
var name = $(this).parent().parent().attr('name'); var itemType = $(this).parent().parent().attr('type'); // 获取当前项的类型
//取消选择 var name = $(this).parent().parent().attr('name'); // 获取当前项的名称
// 如果该项已被选中,取消选中
if($(this).parent().hasClass('layfilter-item-checked')){ if($(this).parent().hasClass('layfilter-item-checked')){
$(this).parent().removeClass('layfilter-item-checked'); $(this).parent().removeClass('layfilter-item-checked'); // 移除选中类
var obj = chekedArr[name]||[]; var obj = chekedArr[name] || [];
for(var i=0;i<obj.length;i++){ for(var i = 0; i < obj.length; i++){
if(obj[i].value==$(this).parent().attr('value')){ if(obj[i].value == $(this).parent().attr('value')){
obj.splice(i, 1); obj.splice(i, 1); // 从选中项中移除
break; break;
} }
} }
chekedArr[name] = obj; chekedArr[name] = obj; // 更新选中的项
}else{ }else{
if(itemType && ('checbox' == itemType || 'radio' == itemType)){ if(itemType && ('checbox' == itemType || 'radio' == itemType)){
//判断类型 // 如果是单选或多选,处理选中状态
if('radio' == itemType){ if('radio' == itemType){
var objs = $(this).parent().siblings(); var objs = $(this).parent().siblings(); // 获取同一组的其他项
chekedArr[name]=[]; chekedArr[name] = []; // 清空选中的项
for(var i=0;i<objs.length;i++){ for(var i = 0; i < objs.length; i++){
objs.eq(i).removeClass('layfilter-item-checked'); objs.eq(i).removeClass('layfilter-item-checked'); // 取消选中其他项
} }
} }
var obj = chekedArr[name]||[]; var obj = chekedArr[name] || [];
obj.push({name:$(this).text(),value:$(this).parent().attr('value')}); obj.push({name: $(this).text(), value: $(this).parent().attr('value')}); // 添加选中的项
chekedArr[name]=obj; chekedArr[name] = obj; // 更新选中的项
$(this).parent().addClass('layfilter-item-checked'); $(this).parent().addClass('layfilter-item-checked'); // 设置当前项为选中状态
}else{ }else{
console.error('复选或单选类型为空?'); console.error('复选或单选类型为空?'); // 如果类型为空,输出错误
} }
} }
}); });
}, },
getValue:function(callback){ getValue:function(callback){ // 获取选中的值,并通过回调函数返回
var obj = getCheckData(); var obj = getCheckData(); // 获取选中的数据
callback.call(this,obj); callback.call(this, obj); // 调用回调函数并传入选中的数据
}, },
on:function(filter,callback){ on:function(filter, callback){ // 监听事件,当过滤器触发时调用回调函数
var f = filter.substring(0,filter.indexOf('(')); var f = filter.substring(0, filter.indexOf('(')); // 获取事件类型(如 'click'
var e = filter.substring(filter.indexOf('(')+1,filter.length-1); var e = filter.substring(filter.indexOf('(') + 1, filter.length - 1); // 获取过滤器的名称
if(typeof callback === "function"){ if(typeof callback === "function"){ // 如果回调是函数
$("[lay-filter='"+e+"']").on(f,function(){ $("[lay-filter='" + e + "']").on(f, function(){ // 为指定的元素绑定事件
var obj = getCheckData(); var obj = getCheckData(); // 获取选中的数据
callback.call(this, obj); // 调用回调函数并传入选中的数据
callback.call(this,obj);
}); });
}else{ }else{
console.error('传入的参数不是一个函数'); console.error('传入的参数不是一个函数'); // 如果回调不是函数,输出错误
} }
} }
} };
layui.link(layui.cache.base + 'layfilter/layfilter.css'); layui.link(layui.cache.base + 'layfilter/layfilter.css'); // 引入样式文件
// 获取选中的数据并格式化为 JSON 对象
function getCheckData(){ function getCheckData(){
var valueJson = {}; var valueJson = {}; // 存储值的对象
var nameJson = {}; var nameJson = {}; // 存储名称的对象
for(var name in chekedArr){ for(var name in chekedArr){ // 遍历选中的项
var json = chekedArr[name]; var json = chekedArr[name];
var values = ''; var values = '';
var names = ''; var names = '';
for(var i=0;i<json.length;i++){ for(var i = 0; i < json.length; i++){
if(i!=json.length-1){ if(i != json.length - 1){
values+=json[i].value+","; values += json[i].value + ","; // 拼接值
names +=json[i].name+","; names += json[i].name + ","; // 拼接名称
}else{ }else{
values+=json[i].value; values += json[i].value; // 最后一个项不加逗号
names +=json[i].name; names += json[i].name;
} }
} }
valueJson[name]=values; valueJson[name] = values; // 存储值
nameJson[name]=names; nameJson[name] = names; // 存储名称
} }
return {values:valueJson,names:nameJson}; return {values: valueJson, names: nameJson}; // 返回格式化后的数据
} }
exports('layfilter', layfilter); exports('layfilter', layfilter); // 输出 layfilter 模块
}) });

@ -1,200 +1,205 @@
$(function () { $(function () {
//加载弹出层 // 加载弹出层和元素模块
layui.use(['form','element'], layui.use(['form', 'element'], function () {
function() { layer = layui.layer; // 获取layui的layer模块
layer = layui.layer; element = layui.element; // 获取layui的element模块
element = layui.element;
}); });
//触发事件 // 定义tab操作
var tab = { var tab = {
tabAdd: function(title,url,id){ tabAdd: function (title, url, id) {
//新增一个Tab项 // 新增一个Tab项
element.tabAdd('xbs_tab', { element.tabAdd('xbs_tab', {
title: title title: title, // 设置tab的标题
,content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>' content: '<iframe tab-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>', // 设置tab的内容为iframe
,id: id id: id // 设置tab的唯一标识id
}) })
} },
,tabDelete: function(othis){ tabDelete: function (othis) {
//删除指定Tab项 // 删除指定Tab项
element.tabDelete('xbs_tab', '44'); //删除:“商品管理” element.tabDelete('xbs_tab', '44'); // 删除id为44的Tab项示例
othis.addClass('layui-btn-disabled'); // 禁用删除按钮
},
othis.addClass('layui-btn-disabled'); tabChange: function (id) {
} // 切换到指定Tab项
,tabChange: function(id){ element.tabChange('xbs_tab', id); // 切换到指定的Tab项
//切换到指定Tab项
element.tabChange('xbs_tab', id); //切换到:用户管理
} }
}; };
// 表格多选功能的处理
tableCheck = { tableCheck = {
init:function () { init: function () {
$(".layui-form-checkbox").click(function(event) { // 绑定复选框点击事件
if($(this).hasClass('layui-form-checked')){ $(".layui-form-checkbox").click(function (event) {
if ($(this).hasClass('layui-form-checked')) {
$(this).removeClass('layui-form-checked'); $(this).removeClass('layui-form-checked');
if($(this).hasClass('header')){ if ($(this).hasClass('header')) {
$(".layui-form-checkbox").removeClass('layui-form-checked'); $(".layui-form-checkbox").removeClass('layui-form-checked'); // 如果是header则取消所有选择
} }
}else{ } else {
$(this).addClass('layui-form-checked'); $(this).addClass('layui-form-checked');
if($(this).hasClass('header')){ if ($(this).hasClass('header')) {
$(".layui-form-checkbox").addClass('layui-form-checked'); $(".layui-form-checkbox").addClass('layui-form-checked'); // 如果是header则选中所有复选框
} }
} }
}); });
}, },
getData:function () { getData: function () {
var obj = $(".layui-form-checked").not('.header'); // 获取所有选中的复选框对应的data-id
var arr=[]; var obj = $(".layui-form-checked").not('.header'); // 排除header行
obj.each(function(index, el) { var arr = [];
arr.push(obj.eq(index).attr('data-id')); obj.each(function (index, el) {
arr.push(obj.eq(index).attr('data-id')); // 将选中的data-id添加到数组
}); });
return arr; return arr; // 返回选中的项的id数组
} }
} };
//开启表格多选 // 开启表格多选
tableCheck.init(); tableCheck.init();
// 左侧菜单切换事件
$('.container .left_open i').click(function(event) { $('.container .left_open i').click(function (event) {
if($('.left-nav').css('left')=='0px'){ if ($('.left-nav').css('left') == '0px') {
$('.left-nav').animate({left: '-221px'}, 100); // 如果左侧菜单是打开的,则关闭它
$('.page-content').animate({left: '0px'}, 100); $('.left-nav').animate({ left: '-221px' }, 100); // 动画收起菜单
$('.page-content-bg').hide(); $('.page-content').animate({ left: '0px' }, 100); // 调整页面内容区域
}else{ $('.page-content-bg').hide(); // 隐藏背景遮罩
$('.left-nav').animate({left: '0px'}, 100); } else {
$('.page-content').animate({left: '221px'}, 100); // 如果左侧菜单是关闭的,则打开它
if($(window).width()<768){ $('.left-nav').animate({ left: '0px' }, 100); // 动画展开菜单
$('.page-content-bg').show(); $('.page-content').animate({ left: '221px' }, 100); // 调整页面内容区域
if ($(window).width() < 768) {
$('.page-content-bg').show(); // 在小屏幕下显示背景遮罩
} }
} }
}); });
$('.page-content-bg').click(function(event) { // 点击背景遮罩关闭菜单
$('.left-nav').animate({left: '-221px'}, 100); $('.page-content-bg').click(function (event) {
$('.page-content').animate({left: '0px'}, 100); $('.left-nav').animate({ left: '-221px' }, 100); // 动画收起菜单
$(this).hide(); $('.page-content').animate({ left: '0px' }, 100); // 调整页面内容区域
$(this).hide(); // 隐藏背景遮罩
}); });
$('.layui-tab-close').click(function(event) { // 关闭tab时移除图标
$('.layui-tab-title li').eq(0).find('i').remove(); $('.layui-tab-close').click(function (event) {
$('.layui-tab-title li').eq(0).find('i').remove(); // 移除第一个Tab项的图标
}); });
$("tbody.x-cate tr[fid!='0']").hide(); // 默认隐藏除fid=0的栏目项
// 栏目多级显示效果 $("tbody.x-cate tr[fid!='0']").hide();
// 栏目多级显示效果,点击展开/收起子栏目
$('.x-show').click(function () { $('.x-show').click(function () {
if($(this).attr('status')=='true'){ if ($(this).attr('status') == 'true') {
$(this).html('&#xe625;'); $(this).html('&#xe625;'); // 修改图标为展开状态
$(this).attr('status','false'); $(this).attr('status', 'false'); // 设置状态为false
cateId = $(this).parents('tr').attr('cate-id'); cateId = $(this).parents('tr').attr('cate-id'); // 获取当前栏目ID
$("tbody tr[fid="+cateId+"]").show(); $("tbody tr[fid=" + cateId + "]").show(); // 显示当前栏目下的子栏目
}else{ } else {
cateIds = []; cateIds = []; // 清空cateIds数组
$(this).html('&#xe623;'); $(this).html('&#xe623;'); // 修改图标为收起状态
$(this).attr('status','true'); $(this).attr('status', 'true'); // 设置状态为true
cateId = $(this).parents('tr').attr('cate-id'); cateId = $(this).parents('tr').attr('cate-id'); // 获取当前栏目ID
getCateId(cateId); getCateId(cateId); // 获取当前栏目的所有子栏目ID
for (var i in cateIds) { for (var i in cateIds) {
$("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('&#xe623;').attr('status','true'); // 隐藏所有子栏目并修改其图标为收起状态
$("tbody tr[cate-id=" + cateIds[i] + "]").hide().find('.x-show').html('&#xe623;').attr('status', 'true');
} }
} }
}) });
//左侧菜单效果 // 左侧菜单项点击事件
// $('#content').bind("click",function(event){
$('.left-nav #nav li').click(function (event) { $('.left-nav #nav li').click(function (event) {
if ($(this).children('.sub-menu').length) {
if($(this).children('.sub-menu').length){ // 如果有子菜单
if($(this).hasClass('open')){ if ($(this).hasClass('open')) {
$(this).removeClass('open'); $(this).removeClass('open');
$(this).find('.nav_right').html('&#xe697;'); $(this).find('.nav_right').html('&#xe697;'); // 修改图标为展开
$(this).children('.sub-menu').stop().slideUp(); $(this).children('.sub-menu').stop().slideUp(); // 隐藏子菜单
$(this).siblings().children('.sub-menu').slideUp(); $(this).siblings().children('.sub-menu').slideUp(); // 隐藏兄弟菜单
}else{ } else {
$(this).addClass('open'); $(this).addClass('open');
$(this).children('a').find('.nav_right').html('&#xe6a6;'); $(this).children('a').find('.nav_right').html('&#xe6a6;'); // 修改图标为收起
$(this).children('.sub-menu').stop().slideDown(); $(this).children('.sub-menu').stop().slideDown(); // 显示子菜单
$(this).siblings().children('.sub-menu').stop().slideUp(); $(this).siblings().children('.sub-menu').stop().slideUp(); // 隐藏兄弟菜单
$(this).siblings().find('.nav_right').html('&#xe697;'); $(this).siblings().find('.nav_right').html('&#xe697;'); // 修改兄弟菜单图标为展开
$(this).siblings().removeClass('open'); $(this).siblings().removeClass('open'); // 移除兄弟菜单的open类
} }
}else{ } else {
var url = $(this).children('a').attr('_href'); // 获取菜单项链接
var url = $(this).children('a').attr('_href'); var title = $(this).find('cite').html(); // 获取菜单项标题
var title = $(this).find('cite').html(); var index = $('.left-nav #nav li').index($(this)); // 获取菜单项索引
var index = $('.left-nav #nav li').index($(this));
// 检查该Tab是否已打开
for (var i = 0; i <$('.x-iframe').length; i++) { for (var i = 0; i < $('.x-iframe').length; i++) {
if($('.x-iframe').eq(i).attr('tab-id')==index+1){ if ($('.x-iframe').eq(i).attr('tab-id') == index + 1) {
tab.tabChange(index+1); tab.tabChange(index + 1); // 切换到已打开的Tab
event.stopPropagation(); event.stopPropagation();
return; return;
} }
}; };
tab.tabAdd(title,url,index+1); // 否则新建Tab项并切换
tab.tabChange(index+1); tab.tabAdd(title, url, index + 1);
tab.tabChange(index + 1);
} }
event.stopPropagation(); event.stopPropagation(); // 阻止事件冒泡
});
}) });
})
var cateIds = []; var cateIds = [];
function getCateId(cateId) {
$("tbody tr[fid="+cateId+"]").each(function(index, el) { // 获取指定栏目ID下的所有子栏目ID
id = $(el).attr('cate-id'); function getCateId(cateId) {
cateIds.push(id); $("tbody tr[fid=" + cateId + "]").each(function (index, el) {
getCateId(id); id = $(el).attr('cate-id'); // 获取子栏目ID
cateIds.push(id); // 将子栏目ID加入数组
getCateId(id); // 递归获取更深层次的子栏目ID
}); });
} }
/*弹出层*/ /* 弹出层相关函数 */
/* /*
参数解释 弹出层函数显示一个iframe窗口
title 标题 title 弹出层的标题
url 请求的url url 请求的URL地址
id 需要操作的数据id id 数据ID
w 弹出层宽度缺省调默认值 w 弹出层宽度缺省调默认值
h 弹出层高度缺省调默认值 h 弹出层高度缺省调默认值
*/ */
function x_admin_show(title,url,w,h){ function x_admin_show(title, url, w, h) {
if (title == null || title == '') { if (title == null || title == '') {
title=false; title = false; // 默认无标题
}; };
if (url == null || url == '') { if (url == null || url == '') {
url="404.html"; url = "404.html"; // 默认URL为404页面
}; };
if (w == null || w == '') { if (w == null || w == '') {
w=($(window).width()*0.9); w = ($(window).width() * 0.9); // 默认宽度为窗口宽度的90%
}; };
if (h == null || h == '') { if (h == null || h == '') {
h=($(window).height() - 50); h = ($(window).height() - 50); // 默认高度为窗口高度减去50
}; };
// 打开弹出层
layer.open({ layer.open({
type: 2, type: 2, // 弹出层类型为iframe
area: [w+'px', h +'px'], area: [w + 'px', h + 'px'], // 设置弹出层大小
fix: false, //不固定 fix: false, // 不固定
maxmin: true, maxmin: true, // 开启最大化和最小化功能
shadeClose: true, shadeClose: true, // 点击遮罩关闭
shade:0.4, shade: 0.4, // 设置遮罩透明度
title: title, title: title, // 设置弹出层标题
content: url content: url // 设置弹出层内容为iframe
}); });
} }
/*关闭弹出框口*/ /* 关闭弹出框 */
function x_admin_close(){ function x_admin_close() {
var index = parent.layer.getFrameIndex(window.name); var index = parent.layer.getFrameIndex(window.name); // 获取iframe的索引
parent.layer.close(index); parent.layer.close(index); // 关闭弹出框
} }

@ -1,92 +1,101 @@
$.fn.xcity = function(pName,cName,aName){ $.fn.xcity = function(pName, cName, aName){
// 获取当前元素下的省、市、区选择框
var p = $(this).find('select[lay-filter=province]'); var p = $(this).find('select[lay-filter=province]'); // 省选择框
var c = $(this).find('select[lay-filter=city]'); // 市选择框
var c = $(this).find('select[lay-filter=city]'); var a = $(this).find('select[lay-filter=area]'); // 区选择框
var a = $(this).find('select[lay-filter=area]');
// 初始化市和区列表为空
var cityList = []; var cityList = [];
var areaList = []; var areaList = [];
showP(provinceList); // 渲染省、市、区下拉框内容
showP(provinceList); // 渲染省份列表
showC(cityList); showC(cityList); // 渲染城市列表
showA(areaList); // 渲染区域列表
showA(areaList);
// 显示省列表
function showP(provinceList) { function showP(provinceList) {
p.html(''); p.html(''); // 清空省选择框内容
is_pName = false; is_pName = false; // 标记是否找到了匹配的省名称
// 遍历省份列表
for (var i in provinceList) { for (var i in provinceList) {
// 如果当前省名称匹配给定的pName则选中该省
if(pName==provinceList[i].name){ if(pName == provinceList[i].name){
is_pName = true; is_pName = true;
cityList = provinceList[i].cityList; cityList = provinceList[i].cityList; // 设置该省对应的城市列表
p.append("<option selected value='"+provinceList[i].name+"'>"+provinceList[i].name+"</option>") p.append("<option selected value='"+provinceList[i].name+"'>"+provinceList[i].name+"</option>"); // 添加选中的省份项
}else{ } else {
p.append("<option value='"+provinceList[i].name+"'>"+provinceList[i].name+"</option>") p.append("<option value='"+provinceList[i].name+"'>"+provinceList[i].name+"</option>"); // 添加未选中的省份项
} }
} }
// 如果没有找到匹配的省名称,则默认选择第一个省份
if(!is_pName){ if(!is_pName){
cityList = provinceList[0].cityList; cityList = provinceList[0].cityList; // 默认选择第一个省的城市列表
} }
} }
// 显示市列表
function showC(cityList) { function showC(cityList) {
c.html(''); // 清空市选择框内容
c.html(''); is_cName = false; // 标记是否找到了匹配的市名称
is_cName = false;
// 遍历城市列表
for (var i in cityList) { for (var i in cityList) {
if(cName==cityList[i].name){ // 如果当前市名称匹配给定的cName则选中该市
if(cName == cityList[i].name){
is_cName = true; is_cName = true;
areaList = cityList[i].areaList; areaList = cityList[i].areaList; // 设置该市对应的区列表
c.append("<option selected value='"+cityList[i].name+"'>"+cityList[i].name+"</option>") c.append("<option selected value='"+cityList[i].name+"'>"+cityList[i].name+"</option>"); // 添加选中的市项
}else{ } else {
c.append("<option value='"+cityList[i].name+"'>"+cityList[i].name+"</option>") c.append("<option value='"+cityList[i].name+"'>"+cityList[i].name+"</option>"); // 添加未选中的市项
} }
} }
// 如果没有找到匹配的市名称,则默认选择第一个市的区列表
if(!is_cName){ if(!is_cName){
areaList = cityList[0].areaList; areaList = cityList[0].areaList; // 默认选择第一个市的区列表
} }
} }
// 显示区列表
function showA(areaList) { function showA(areaList) {
a.html(''); a.html(''); // 清空区选择框内容
// 遍历区列表并渲染
for (var i in areaList) { for (var i in areaList) {
// 如果当前区名称匹配给定的aName则选中该区
if(aName==areaList[i]){ if(aName == areaList[i]){
a.append("<option selected value='"+areaList[i]+"'>"+areaList[i]+"</option>") a.append("<option selected value='"+areaList[i]+"'>"+areaList[i]+"</option>"); // 添加选中的区项
}else{ } else {
a.append("<option value='"+areaList[i]+"'>"+areaList[i]+"</option>") a.append("<option value='"+areaList[i]+"'>"+areaList[i]+"</option>"); // 添加未选中的区项
} }
} }
} }
// 渲染选择框应用layui样式
form.render('select'); form.render('select');
// 绑定省选择框的变更事件
form.on('select(province)', function(data){ form.on('select(province)', function(data){
pName = data.value; pName = data.value; // 更新pName为当前选中的省名称
showP(provinceList); showP(provinceList); // 重新渲染省、市、区选择框
showC(cityList); showC(cityList);
showA(areaList); showA(areaList);
form.render('select'); form.render('select'); // 渲染更新后的选择框
}); });
// 绑定市选择框的变更事件
form.on('select(city)', function(data){ form.on('select(city)', function(data){
cName = data.value; cName = data.value; // 更新cName为当前选中的市名称
showC(cityList); showC(cityList); // 重新渲染市、区选择框
showA(areaList); showA(areaList);
form.render('select'); form.render('select'); // 渲染更新后的选择框
}); });
}

Loading…
Cancel
Save