php开发实战分析(10):城市区县联动筛选

news2024/10/2 6:27:05

php开发实战分析系列目录

  1. php开发实战分析(1):mysql操作字段(添加、删除、修改,多数据表中新增多个字段)
  2. php开发实战分析(2):cookie的动态使用(设置、获取、删除、猜你喜欢原理、购物车调用)
  3. php开发实战分析(3):php中判断变量为空(0、false、null)的方法
  4. php开发实战分析(4):php调用封装函数包含文件路径自适应不同目录的解决方案($_SERVER[‘DOCUMENT_ROOT‘]与__DIR__魔术常量)
  5. php开发实战分析(5):文件和目录的操作
  6. php开发实战分析(6):配置文件或缓存文件的生成与调用
  7. php开发实战分析(7):mysql类库操作的高级使用
  8. php开发实战分析(8):mysql类库的操作高级使用API开发(字段操作、权限分配、日期格式、跨表查询,数据分表)
  9. php开发实战分析(9):使用实现短地址的分享的解决方案(第三方短链接服务、数据库自增ID转换、自定义短地址生成算法、自增数字短码)

城市区县联动筛选

  • php开发实战分析系列目录
  • 一、构建HTML容器
  • 二、动态城市区县数组
  • 三、数据筛选
    • 1.遍历城市
    • 2.指定城市筛选区县
  • 四、扩展知识

一、构建HTML容器

在这里插入图片描述

   <div class="city">
        <div class="cityName">选择城市</div>
        <div class="cityItem">
            {foreach $data_city as $k=>$v}<span {if $v eq $smarty.get.city}class="cityAct"{/if}><a href="?m=Project&a=cluster&act=ShowCluster&city={$v}#lock{$k}">{$v}</a></span>{/foreach}
        </div>
    </div>

      <div class="city">
            <div class="cityName">选择区县</div>
            <div class="cityItem">
                {foreach $data_area as $p}<span {if $p eq $smarty.get.area}class="cityAct"{/if}><a href="?m=Project&a=cluster&act=ShowCluster&city={$cityName}&area={$p}">{$p}</a></span>{/foreach}
            </div>
        </div>

二、动态城市区县数组

 $district = array(
            array("city" => "济南市", "areaList" => array("历下区", "市中区", "槐荫区", "天桥区", "历城区", "长清区", "章丘区", "济阳区", "莱芜区", "钢城区", "平阴县", "商河县")),
            array("city" => "青岛市", "areaList" => array("市南区", "市北区", "黄岛区", "崂山区", "李沧区", "城阳区", "即墨区", "胶州市", "平度市", "莱西市", "青岛高新技术产业开发区")),
            array("city" => "淄博市", "areaList" => array("淄川区", "张店区", "博山区", "临淄区", "周村区", "桓台县", "高青县", "沂源县")),
            array("city" => "枣庄市", "areaList" => array("市中区", "薛城区", "峄城区", "台儿庄区", "山亭区", "滕州市")),
            array("city" => "东营市", "areaList" => array("东营区", "河口区", "垦利县", "利津县", "广饶县")),
            array("city" => "烟台市", "areaList" => array("芝罘区", "福山区", "牟平区", "莱山区", "蓬莱区", "龙口市", "莱阳市", "莱州市", "招远市", "栖霞市", "海阳市")),
            array("city" => "潍坊市", "areaList" => array("潍城区", "寒亭区", "坊子区", "奎文区", "临朐县", "昌乐县", "青州市", "诸城市", "寿光市", "安丘市", "高密市", "昌邑市")),
            array("city" => "济宁市", "areaList" => array("任城区", "兖州区", "微山县", "鱼台县", "金乡县", "嘉祥县", "汶上县", "泗水县", "梁山县", "曲阜市", "邹城市")),
            array("city" => "泰安市", "areaList" => array("泰山区", "岱岳区", "新泰市", "肥城市", "宁阳县", "东平县")),
            array("city" => "威海市", "areaList" => array("环翠区", "文登区", "荣成市", "乳山市")),
            array("city" => "日照市", "areaList" => array("东港区", "岚山区", "五莲县", "莒县")),
            array("city" => "临沂市", "areaList" => array("兰山区", "罗庄区", "河东区", "郯城县", "兰陵县", "莒南县", "沂水县", "蒙阴县", "平邑县", "费县", "沂南县", "临沭县", "临沂高新技术产业开发区")),
            array("city" => "德州市", "areaList" => array("德城区", "陵城区", "宁津县", "庆云县", "临邑县", "齐河县", "平原县", "夏津县", "武城县", "乐陵市", "禹城市")),
            array("city" => "聊城市", "areaList" => array("东昌府区", "阳谷县 ", "莘县", "茌平区", "东阿县", "冠县", "高唐县", "临清市")),
            array("city" => "滨州市", "areaList" => array("滨城区", "沾化区", "惠民县", "阳信县", "无棣县", "博兴县", "邹平市")),
            array("city" => "菏泽市", "areaList" => array("牡丹区", "定陶区", "曹县", "单县", "成武县", "巨野县", "郓城县", "鄄城县", "东明县", "菏泽经济技术开发区", "菏泽高新技术产业开发区"))
        );
        $citys = filterArrayByCity($district);
        $cityName = get_param('city');
        if ($cityName == "") {
            $cityName = "济南市";
        }
        $areas = filterArrayByKey($district, 'city', $cityName);

三、数据筛选

1.遍历城市

function filterArrayByCity($array)
{
    $result = array();
    foreach ($array as $v) {
        $result[] = $v["city"];
    }
    return $result;
}

2.指定城市筛选区县

若要筛选数组中指定键值的字段,并输出对应字段的值,可以使用循环遍历数组,根据键值进行筛选和提取。

//筛选数组
function filterArrayByKey($array, $key, $value)
{
    $result = array();
    foreach ($array as $item) {
        if (isset($item[$key]) && $item[$key] == $value) {
            $result[] = $item["areaList"];
        }
    }
    return $result[0];
}

在这里插入图片描述

四、扩展知识

城市区县联动筛选常用于根据用户选择的城市,动态加载对应的区县列表供用户选择。实现这一功能需要使用前端的JavaScript实现动态交互,并与后端进行数据交互。

以下是一个简单的示例代码,演示了如何使用JavaScript实现城市区县联动筛选:

HTML部分:

<!-- 城市下拉列表 -->
<select id="citySelect" onchange="loadCounties()">
  <option value="">请选择城市</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <!-- 其他城市选项 -->
</select>

<!-- 区县下拉列表 -->
<select id="countySelect">
  <option value="">请选择区县</option>
</select>

JavaScript部分:

function loadCounties() {
  var citySelect = document.getElementById("citySelect");
  var countySelect = document.getElementById("countySelect");
  var selectedCity = citySelect.value;
  
  // 清空区县下拉列表
  countySelect.innerHTML = '<option value="">请选择区县</option>';

  // 根据选择的城市加载对应的区县列表
  if (selectedCity === "beijing") {
    loadBeijingCounties();
  } else if (selectedCity === "shanghai") {
    loadShanghaiCounties();
  }
  // 根据其他城市加载对应的区县列表
}

function loadBeijingCounties() {
  // 向后端发送异步请求,获取北京市的区县列表
  // 在回调函数中处理返回的数据,动态生成区县选项,添加到countySelect中
  // 示例中使用静态数据作为示范
  var counties = ["东城区", "西城区", "朝阳区", "海淀区", "丰台区"];
  
  for (var i = 0; i < counties.length; i++) {
    var option = document.createElement("option");
    option.text = counties[i];
    option.value = counties[i];
    countySelect.add(option);
  }
}

function loadShanghaiCounties() {
  // 向后端发送异步请求,获取上海市的区县列表
  // 在回调函数中处理返回的数据,动态生成区县选项,添加到countySelect中
  // 示例中使用静态数据作为示范
  var counties = ["黄浦区", "徐汇区", "静安区", "长宁区", "普陀区"];
  
  for (var i = 0; i < counties.length; i++) {
    var option = document.createElement("option");
    option.text = counties[i];
    option.value = counties[i];
    countySelect.add(option);
  }
}

上述示例代码通过监听城市下拉列表的onchange事件,当用户选择城市时,会调用loadCounties()函数。根据选择的城市,动态加载对应的区县列表。

其中loadCounties()函数根据选择的城市调用相应的函数来加载区县列表。在示例中,使用了静态数据来作为示范,实际应用中需要通过向后端发送异步请求来获取真实的区县数据,并在回调函数中进行处理。


@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/788215.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

热烈祝贺埃文科技荣获CCF第38届中国计算机应用大会计算机应用科学技术二等奖

2023年7月16-19日&#xff0c;第38届中国计算机应用大会&#xff08;CCF NCCA 2023&#xff09;暨2023年人工智能&#xff0b;应用学术会议在江苏苏州举办。埃文科技董事长兼总经理王永博士受邀出席智慧网安论坛&#xff08;一&#xff09;数据要素市场化&#xff0c;并发表《智…

本地私有仓库部署、docker--harbor私有仓库部署和管理

部署本地私有仓库 拉取镜像 修改daemon.json配置文件 重启docker服务 创建容器 为镜像打标签 上传镜像 查看私有仓库 其他主机拉取私有仓库镜像 Docker--harbor私有仓库 &#xff08;1&#xff09;什么是Harbor Harbor 是 VMware 公司开源的企业级 Docker Registry 项目…

React Dva项目中.roadhogrc.mock.js直接自动导入mock目录下所有文件方式

上文 React Dva项目中模仿网络请求数据方法 中&#xff0c;我们书写了Dva项目模拟后端数据的方式 但是 我们.roadhogrc.mock.js中的这个处理其实并不好用 我们还需要一个一个的引入 我们可以直接靠一段代码 import fs from fs; import path from path; const mock {} fs.re…

VarHandle:Java9中保证变量读写可见性、有序性、原子性利器

文章目录 一、什么是VarHandle0、JMM1、jdk9之前无锁技术的实现 二、VarHandle使用1、VarHandle 快速上手2、VarHandle常用方法3、实战案例1&#xff1a;解决可见性&#xff08;比volatile轻量&#xff09;4、实战案例2&#xff1a;解决指令重排序&#xff08;比volatile轻量&a…

3dsmax制作一个小人

文章目录 步骤起阶五官手臂短袖添加头发、头饰BodyPaint软件贴图导入到3dsmax 渲染 步骤 起阶 五官 手臂 短袖 添加头发、头饰 BodyPaint软件贴图 寻找网络贴图&#xff0c;用PS切割&#xff0c;用BodyPaint恢复纹理 导入到3dsmax 渲染

【干货防踩坑/全图文分步/Gitlab镜像仓库自动同步】Gitlab CE/EE镜像仓库的配置技巧(含ssh/密码两验证方法)

【干货踩坑】Gitlab CE/EE镜像仓库的配置技巧&#xff08;含ssh/密码两验证方法&#xff09; 众所周知&#xff0c;Gitlab是个好东西。为什么呢&#xff1f;GitHub没有的功能&#xff0c;他全有了。更何况还可以私有部署。这两天自己部署了Gitlab&#xff0c;然后想把自己的项…

springboot + redis + 注解 + 拦截器 实现接口幂等性校验

一、概念 幂等是一个数学与计算机学概念&#xff0c;在数学中某一元运算为幂等时&#xff0c;其作用在任一元素两次后会和其作用一次的结果相同。在计算机中编程中&#xff0c;一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。 幂等函数或幂等方法是…

【C++杂货铺】内存管理

文章目录 一、C/C内存分布二、C内存管理方式2.1 new和delete操作内置类型2.2 new和delete操作自定义类型 三、operator new与operator delete函数四、new和delete的实现原理4.1 内置类型4.2 自定义类型 五、定位new表达式&#xff08;placement-new&#xff09;六、malloc/free…

二十三种设计模式第十八篇--责任链模式

责任链模式是一种行为型设计模式&#xff0c;它允许你将请求沿着处理者链传递&#xff0c;直到有一个处理者能够处理该请求为止。责任链模式将请求发送者和请求处理者解耦&#xff0c;从而使得多个处理者都有机会处理同一个请求。 该模式包含以下几个关键角色&#xff1a; 抽象…

CUDA之指针篇

CUDA教程 第一章 指针篇 第二章 cuda原理篇 第三章 随着人工智能的发展与人才的内卷&#xff0c;很多企业已将深度学习算法的C部署能力作为基本技能之一。面对诸多arm相关且资源有限的设备&#xff0c;往往想更好的提速&#xff0c;满足更高时效性&#xff0c;必将更多类似矩…

【高危】Spring Security鉴权规则错误配置风险

漏洞描述 Spring Security 是一套为基于Spring的应用程序提供说明性安全保护的安全框架。 在 Spring Security 受影响的版本中&#xff0c;由于 Spring Security 的授权规则会应用于整个应用程序上下文&#xff0c;当应用程序中包含多个servlet&#xff0c;并且其中一个为Dis…

测试必备工具之抓包神器 Charles 如何抓取 https 数据包?

前言 之前我们发过一篇文章讲解了Charles抓包工具的基本使用&#xff0c;有需要的小伙伴可以去看上一篇文章。 之前文章讲的数据包主要是http协议&#xff0c;大家可以看到数据包并直接显示具体详细的内容&#xff1a; 但是如果抓到的是https的报文&#xff0c;是没有办法直…

Redis DeskTop Manager 使用教程

简单粗暴的介绍一下&#xff0c;以及在工作中如何去使用工具管理我们的Redis&#xff0c;更加详细及深入的使用方法欢迎大家评论区讨论&#xff0c;我也和大家一起学习。 简介&#xff1a; Redis Desktop Manager (RDM) 是一个开源的图形化 Redis 数据库管理工具&#xff0c;…

erp什么意思,erp系统软件到底是干嘛用的?

企业资源计划 (ERP) 的定义 企业资源计划 (ERP) 是指组织用于管理日常业务活动的一套软件&#xff0c;这些活动包括会计、采购、项目管理、风险管理和合规性、供应链运营等等。完整的 ERP 套件还包括企业绩效管理软件&#xff0c;用于帮助企业针对财务结果制定计划和编制预算…

react-native项目安卓版本升级 compileSdkVersion 29->31

因为 react-native-ble-manager添加过程及碰到的问题 依赖 https://github.com/innoveit/react-native-ble-manager 参考&#xff1a;https://blog.csdn.net/withings/article/details/71378562 iOS 按react-native-ble-manager 文档在 【Info.plist】加了key之后能正常使用…

Vue学习Day1——小案例快速入门Vue指令

一、Vue简介 概念&#xff1a;是一套 构建用户界面 的 渐进式 框架 Vue2官网&#xff1a;https://v2.cn.vuejs.org/ 1、什么是渐进式 所谓渐进式就是循序渐进&#xff0c;不一定非得把Vue中的所有API都学完才能开发Vue&#xff0c;可以学一点开发一点 Vue的两种开发方式&…

【图像分割】基于蜣螂优化算法DBO的Otsu(大津法)多阈值电表数字图像分割 电表数字识别【Matlab代码#51】

文章目录 【可更换其他算法&#xff0c;获取资源请见文章第5节&#xff1a;资源获取】1. 原始蜣螂优化算法1.1 滚球行为1.2 跳舞行为1.3 繁殖行为1.4 偷窃行为 2. 多阈值Otsu原理3. 部分代码展示4. 仿真结果展示5. 资源获取说明 【可更换其他算法&#xff0c;获取资源请见文章第…

UDS之27服务

SecurityAccess&#xff08;0x27&#xff09;—— 安全访问 这个服务的目的是为那些限制访问&#xff0c;以及和排放、安全相关的一些服务和数据提供一些访问权限来保护数据。 此服务执行步骤如下&#xff1a; &#xff08;1&#xff09;Client请求一个种子&#xff08;Seed…

一.安装k8s环境

1.初始操作 默认3台服务器都执行 # 关闭防火墙 systemctl stop firewalld systemctl disable firewalld# 关闭selinux sed -i s/enforcing/disabled/ /etc/selinux/config # 永久 setenforce 0 # 临时# 关闭swap swapoff -a # 临时 sed -ri s/.*swap.*/#&/ /etc/fstab…

国标GB28181视频监控平台EasyGBS无法播放,抓包返回ICMP的排查过程

国标GB28181视频平台EasyGBS是基于国标GB/T28181协议的行业内安防视频流媒体能力平台&#xff0c;可实现的视频功能包括&#xff1a;实时监控直播、录像、检索与回看、语音对讲、云存储、告警、平台级联等功能。国标GB28181视频监控平台部署简单、可拓展性强&#xff0c;支持将…