sunpengcheng_branch
spc 6 months ago
parent fbdbf96c14
commit 6e65df18ad

@ -1,147 +1,164 @@
layui.define(['jquery', 'layer'], function (exports){
var $ = layui.jquery;
var chekedArr = {};
var layfilter = {
render:function(options){
var url = options.url;
var flag = true;
//传入了地址,则直接将此地址覆盖
layui.define(['jquery', 'layer'], function (exports){ // 定义一个模块,依赖 'jquery' 和 'layer'
var $ = layui.jquery; // 使用 layui 的 jQuery
var chekedArr = {}; // 初始化一个空对象用于存储选中的过滤项
var layfilter = { // 定义 layfilter 对象
render:function(options){ // 渲染过滤组件的方法
var url = options.url; // 获取传入的 url 地址
var flag = true; // 初始化标志位,用于控制是否继续渲染
// 如果传入了 url则从该地址获取数据
if(url){
$.getJSON(url,options.where,function(res){
if(res.code == 0){
var data = res.data;
flase = true;
layfilter.init(options,data);
$.getJSON(url, options.where, function(res){ // 通过 GET 请求获取 JSON 数据
if(res.code == 0){ // 如果返回的 code 为 0表示成功
var data = res.data; // 获取返回的数据
flase = true; // 设置标志位为 true
layfilter.init(options, data); // 调用 init 方法,传入选项和数据进行初始化
}else{
layer.msg(res.msg||'查询过滤组件数据异常',{icon:2});
flag = false
layer.msg(res.msg || '查询过滤组件数据异常', {icon: 2}); // 显示错误信息
flag = false; // 如果失败,设置 flag 为 false
}
})
});
}
if(!flag){
if(!flag){ // 如果 flag 为 false直接返回不执行后续操作
return;
}
},
init:function(options,dataSource){
var elem = options.elem;
var $dom = $(elem);
var itemWidth = options.itemWidth
var arr = {};
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>');
var $td2 = $('<td class="items"></td>');
var type = dataSource[i].type;
if(!type){
console.warn('第'+(i+1)+'个元素的类型[type]为空设为默认值[radio]');
init:function(options, dataSource){ // 初始化过滤组件的方法
var elem = options.elem; // 获取传入的元素
var $dom = $(elem); // 获取该元素的 jQuery 对象
var itemWidth = options.itemWidth; // 获取项的宽度
var arr = {}; // 初始化一个空对象,用于存储选中的项
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>'); // 创建第一列(标题)
var $td2 = $('<td class="items"></td>'); // 创建第二列(选项列表)
var type = dataSource[i].type; // 获取当前项的类型
if(!type){ // 如果没有设置类型,默认为 'radio'
console.warn('第' + (i + 1) + '个元素的类型[type]为空设为默认值[radio]');
type = 'radio';
}
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]=[];
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'){
var $ul = $('<ul class="layfilter-ul" type="'+type+'" name="'+dataSource[i].name+'"></ul>'); // 创建列表元素
// 如果传入了项宽度,则根据索引设置宽度,否则默认为 80
var width = itemWidth && itemWidth.length > 0 ? (itemWidth.length > i ? itemWidth[i] : itemWidth[itemWidth.length - 1]) : 80;
arr[dataSource[i].name] = []; // 初始化存储选中的项的数组
// 遍历当前项的数据,生成每一个选项
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";
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>');
}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>');
}
}
// 将列表添加到第二列,并将整行添加到表格中
$td2.append($ul);
$tr.append($td1).append($td2);
$table.append($tr);
}
$dom.append($table);
chekedArr=arr;
//注册点击事件
$('.filterTable tr td li a').bind('click',function(){
if($(this).attr('disabled')){
$dom.append($table); // 将表格添加到指定的 DOM 元素中
chekedArr = arr; // 更新选中的项
// 注册点击事件,处理项的选中与取消选中
$('.filterTable tr td li a').bind('click', function(){
if($(this).attr('disabled')){ // 如果该项禁用,返回不做处理
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')){
$(this).parent().removeClass('layfilter-item-checked');
var obj = chekedArr[name]||[];
for(var i=0;i<obj.length;i++){
if(obj[i].value==$(this).parent().attr('value')){
obj.splice(i, 1);
$(this).parent().removeClass('layfilter-item-checked'); // 移除选中类
var obj = chekedArr[name] || [];
for(var i = 0; i < obj.length; i++){
if(obj[i].value == $(this).parent().attr('value')){
obj.splice(i, 1); // 从选中项中移除
break;
}
}
chekedArr[name] = obj;
chekedArr[name] = obj; // 更新选中的项
}else{
if(itemType && ('checbox' == itemType || 'radio' == itemType)){
//判断类型
// 如果是单选或多选,处理选中状态
if('radio' == itemType){
var objs = $(this).parent().siblings();
chekedArr[name]=[];
for(var i=0;i<objs.length;i++){
objs.eq(i).removeClass('layfilter-item-checked');
var objs = $(this).parent().siblings(); // 获取同一组的其他项
chekedArr[name] = []; // 清空选中的项
for(var i = 0; i < objs.length; i++){
objs.eq(i).removeClass('layfilter-item-checked'); // 取消选中其他项
}
}
var obj = chekedArr[name]||[];
obj.push({name:$(this).text(),value:$(this).parent().attr('value')});
chekedArr[name]=obj;
$(this).parent().addClass('layfilter-item-checked');
var obj = chekedArr[name] || [];
obj.push({name: $(this).text(), value: $(this).parent().attr('value')}); // 添加选中的项
chekedArr[name] = obj; // 更新选中的项
$(this).parent().addClass('layfilter-item-checked'); // 设置当前项为选中状态
}else{
console.error('复选或单选类型为空?');
console.error('复选或单选类型为空?'); // 如果类型为空,输出错误
}
}
});
},
getValue:function(callback){
var obj = getCheckData();
callback.call(this,obj);
getValue:function(callback){ // 获取选中的值,并通过回调函数返回
var obj = getCheckData(); // 获取选中的数据
callback.call(this, obj); // 调用回调函数并传入选中的数据
},
on:function(filter,callback){
var f = filter.substring(0,filter.indexOf('('));
var e = filter.substring(filter.indexOf('(')+1,filter.length-1);
if(typeof callback === "function"){
$("[lay-filter='"+e+"']").on(f,function(){
var obj = getCheckData();
callback.call(this,obj);
on:function(filter, callback){ // 监听事件,当过滤器触发时调用回调函数
var f = filter.substring(0, filter.indexOf('(')); // 获取事件类型(如 'click'
var e = filter.substring(filter.indexOf('(') + 1, filter.length - 1); // 获取过滤器的名称
if(typeof callback === "function"){ // 如果回调是函数
$("[lay-filter='" + e + "']").on(f, function(){ // 为指定的元素绑定事件
var obj = getCheckData(); // 获取选中的数据
callback.call(this, obj); // 调用回调函数并传入选中的数据
});
}else{
console.error('传入的参数不是一个函数');
console.error('传入的参数不是一个函数'); // 如果回调不是函数,输出错误
}
}
}
};
layui.link(layui.cache.base + 'layfilter/layfilter.css');
layui.link(layui.cache.base + 'layfilter/layfilter.css'); // 引入样式文件
// 获取选中的数据并格式化为 JSON 对象
function getCheckData(){
var valueJson = {};
var nameJson = {};
for(var name in chekedArr){
var valueJson = {}; // 存储值的对象
var nameJson = {}; // 存储名称的对象
for(var name in chekedArr){ // 遍历选中的项
var json = chekedArr[name];
var values = '';
var names = '';
for(var i=0;i<json.length;i++){
if(i!=json.length-1){
values+=json[i].value+",";
names +=json[i].name+",";
for(var i = 0; i < json.length; i++){
if(i != json.length - 1){
values += json[i].value + ","; // 拼接值
names += json[i].name + ","; // 拼接名称
}else{
values+=json[i].value;
names +=json[i].name;
values += json[i].value; // 最后一个项不加逗号
names += json[i].name;
}
}
valueJson[name]=values;
nameJson[name]=names;
valueJson[name] = values; // 存储值
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 () {
//加载弹出层
layui.use(['form','element'],
function() {
layer = layui.layer;
element = layui.element;
// 加载弹出层和元素模块
layui.use(['form', 'element'], function () {
layer = layui.layer; // 获取layui的layer模块
element = layui.element; // 获取layui的element模块
});
//触发事件
var tab = {
tabAdd: function(title,url,id){
//新增一个Tab项
element.tabAdd('xbs_tab', {
title: title
,content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>'
,id: id
})
}
,tabDelete: function(othis){
//删除指定Tab项
element.tabDelete('xbs_tab', '44'); //删除:“商品管理”
othis.addClass('layui-btn-disabled');
}
,tabChange: function(id){
//切换到指定Tab项
element.tabChange('xbs_tab', id); //切换到:用户管理
// 定义tab操作
var tab = {
tabAdd: function (title, url, id) {
// 新增一个Tab项
element.tabAdd('xbs_tab', {
title: title, // 设置tab的标题
content: '<iframe tab-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>', // 设置tab的内容为iframe
id: id // 设置tab的唯一标识id
})
},
tabDelete: function (othis) {
// 删除指定Tab项
element.tabDelete('xbs_tab', '44'); // 删除id为44的Tab项示例
othis.addClass('layui-btn-disabled'); // 禁用删除按钮
},
tabChange: function (id) {
// 切换到指定Tab项
element.tabChange('xbs_tab', id); // 切换到指定的Tab项
}
};
};
// 表格多选功能的处理
tableCheck = {
init:function () {
$(".layui-form-checkbox").click(function(event) {
if($(this).hasClass('layui-form-checked')){
init: function () {
// 绑定复选框点击事件
$(".layui-form-checkbox").click(function (event) {
if ($(this).hasClass('layui-form-checked')) {
$(this).removeClass('layui-form-checked');
if($(this).hasClass('header')){
$(".layui-form-checkbox").removeClass('layui-form-checked');
if ($(this).hasClass('header')) {
$(".layui-form-checkbox").removeClass('layui-form-checked'); // 如果是header则取消所有选择
}
}else{
} else {
$(this).addClass('layui-form-checked');
if($(this).hasClass('header')){
$(".layui-form-checkbox").addClass('layui-form-checked');
if ($(this).hasClass('header')) {
$(".layui-form-checkbox").addClass('layui-form-checked'); // 如果是header则选中所有复选框
}
}
});
},
getData:function () {
var obj = $(".layui-form-checked").not('.header');
var arr=[];
obj.each(function(index, el) {
arr.push(obj.eq(index).attr('data-id'));
getData: function () {
// 获取所有选中的复选框对应的data-id
var obj = $(".layui-form-checked").not('.header'); // 排除header行
var arr = [];
obj.each(function (index, el) {
arr.push(obj.eq(index).attr('data-id')); // 将选中的data-id添加到数组
});
return arr;
return arr; // 返回选中的项的id数组
}
}
};
//开启表格多选
// 开启表格多选
tableCheck.init();
$('.container .left_open i').click(function(event) {
if($('.left-nav').css('left')=='0px'){
$('.left-nav').animate({left: '-221px'}, 100);
$('.page-content').animate({left: '0px'}, 100);
$('.page-content-bg').hide();
}else{
$('.left-nav').animate({left: '0px'}, 100);
$('.page-content').animate({left: '221px'}, 100);
if($(window).width()<768){
$('.page-content-bg').show();
// 左侧菜单切换事件
$('.container .left_open i').click(function (event) {
if ($('.left-nav').css('left') == '0px') {
// 如果左侧菜单是打开的,则关闭它
$('.left-nav').animate({ left: '-221px' }, 100); // 动画收起菜单
$('.page-content').animate({ left: '0px' }, 100); // 调整页面内容区域
$('.page-content-bg').hide(); // 隐藏背景遮罩
} else {
// 如果左侧菜单是关闭的,则打开它
$('.left-nav').animate({ left: '0px' }, 100); // 动画展开菜单
$('.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').animate({left: '0px'}, 100);
$(this).hide();
// 点击背景遮罩关闭菜单
$('.page-content-bg').click(function (event) {
$('.left-nav').animate({ left: '-221px' }, 100); // 动画收起菜单
$('.page-content').animate({ left: '0px' }, 100); // 调整页面内容区域
$(this).hide(); // 隐藏背景遮罩
});
$('.layui-tab-close').click(function(event) {
$('.layui-tab-title li').eq(0).find('i').remove();
// 关闭tab时移除图标
$('.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 () {
if($(this).attr('status')=='true'){
$(this).html('&#xe625;');
$(this).attr('status','false');
cateId = $(this).parents('tr').attr('cate-id');
$("tbody tr[fid="+cateId+"]").show();
}else{
cateIds = [];
$(this).html('&#xe623;');
$(this).attr('status','true');
cateId = $(this).parents('tr').attr('cate-id');
getCateId(cateId);
if ($(this).attr('status') == 'true') {
$(this).html('&#xe625;'); // 修改图标为展开状态
$(this).attr('status', 'false'); // 设置状态为false
cateId = $(this).parents('tr').attr('cate-id'); // 获取当前栏目ID
$("tbody tr[fid=" + cateId + "]").show(); // 显示当前栏目下的子栏目
} else {
cateIds = []; // 清空cateIds数组
$(this).html('&#xe623;'); // 修改图标为收起状态
$(this).attr('status', 'true'); // 设置状态为true
cateId = $(this).parents('tr').attr('cate-id'); // 获取当前栏目ID
getCateId(cateId); // 获取当前栏目的所有子栏目ID
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) {
if($(this).children('.sub-menu').length){
if($(this).hasClass('open')){
if ($(this).children('.sub-menu').length) {
// 如果有子菜单
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).find('.nav_right').html('&#xe697;');
$(this).children('.sub-menu').stop().slideUp();
$(this).siblings().children('.sub-menu').slideUp();
}else{
$(this).find('.nav_right').html('&#xe697;'); // 修改图标为展开
$(this).children('.sub-menu').stop().slideUp(); // 隐藏子菜单
$(this).siblings().children('.sub-menu').slideUp(); // 隐藏兄弟菜单
} else {
$(this).addClass('open');
$(this).children('a').find('.nav_right').html('&#xe6a6;');
$(this).children('.sub-menu').stop().slideDown();
$(this).siblings().children('.sub-menu').stop().slideUp();
$(this).siblings().find('.nav_right').html('&#xe697;');
$(this).siblings().removeClass('open');
$(this).children('a').find('.nav_right').html('&#xe6a6;'); // 修改图标为收起
$(this).children('.sub-menu').stop().slideDown(); // 显示子菜单
$(this).siblings().children('.sub-menu').stop().slideUp(); // 隐藏兄弟菜单
$(this).siblings().find('.nav_right').html('&#xe697;'); // 修改兄弟菜单图标为展开
$(this).siblings().removeClass('open'); // 移除兄弟菜单的open类
}
}else{
var url = $(this).children('a').attr('_href');
var title = $(this).find('cite').html();
var index = $('.left-nav #nav li').index($(this));
for (var i = 0; i <$('.x-iframe').length; i++) {
if($('.x-iframe').eq(i).attr('tab-id')==index+1){
tab.tabChange(index+1);
} else {
var url = $(this).children('a').attr('_href'); // 获取菜单项链接
var title = $(this).find('cite').html(); // 获取菜单项标题
var index = $('.left-nav #nav li').index($(this)); // 获取菜单项索引
// 检查该Tab是否已打开
for (var i = 0; i < $('.x-iframe').length; i++) {
if ($('.x-iframe').eq(i).attr('tab-id') == index + 1) {
tab.tabChange(index + 1); // 切换到已打开的Tab
event.stopPropagation();
return;
}
};
tab.tabAdd(title,url,index+1);
tab.tabChange(index+1);
// 否则新建Tab项并切换
tab.tabAdd(title, url, index + 1);
tab.tabChange(index + 1);
}
event.stopPropagation();
})
})
event.stopPropagation(); // 阻止事件冒泡
});
});
var cateIds = [];
// 获取指定栏目ID下的所有子栏目ID
function getCateId(cateId) {
$("tbody tr[fid="+cateId+"]").each(function(index, el) {
id = $(el).attr('cate-id');
cateIds.push(id);
getCateId(id);
$("tbody tr[fid=" + cateId + "]").each(function (index, el) {
id = $(el).attr('cate-id'); // 获取子栏目ID
cateIds.push(id); // 将子栏目ID加入数组
getCateId(id); // 递归获取更深层次的子栏目ID
});
}
/*弹出层*/
/* 弹出层相关函数 */
/*
参数解释
title 标题
url 请求的url
id 需要操作的数据id
弹出层函数显示一个iframe窗口
title 弹出层的标题
url 请求的URL地址
id 数据ID
w 弹出层宽度缺省调默认值
h 弹出层高度缺省调默认值
*/
function x_admin_show(title,url,w,h){
function x_admin_show(title, url, w, h) {
if (title == null || title == '') {
title=false;
title = false; // 默认无标题
};
if (url == null || url == '') {
url="404.html";
url = "404.html"; // 默认URL为404页面
};
if (w == null || w == '') {
w=($(window).width()*0.9);
w = ($(window).width() * 0.9); // 默认宽度为窗口宽度的90%
};
if (h == null || h == '') {
h=($(window).height() - 50);
h = ($(window).height() - 50); // 默认高度为窗口高度减去50
};
// 打开弹出层
layer.open({
type: 2,
area: [w+'px', h +'px'],
fix: false, //不固定
maxmin: true,
shadeClose: true,
shade:0.4,
title: title,
content: url
type: 2, // 弹出层类型为iframe
area: [w + 'px', h + 'px'], // 设置弹出层大小
fix: false, // 不固定
maxmin: true, // 开启最大化和最小化功能
shadeClose: true, // 点击遮罩关闭
shade: 0.4, // 设置遮罩透明度
title: title, // 设置弹出层标题
content: url // 设置弹出层内容为iframe
});
}
/*关闭弹出框口*/
function x_admin_close(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
/* 关闭弹出框 */
function x_admin_close() {
var index = parent.layer.getFrameIndex(window.name); // 获取iframe的索引
parent.layer.close(index); // 关闭弹出框
}

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

Loading…
Cancel
Save