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

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


@漏刻有时

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

DB-GPT:强强联合Langchain-Vicuna的应用实战开源项目,彻底改变与数据库的交互方式

今天看到 蚂蚁科技 Magic 开源的DB-GPT项目&#xff0c;觉得创意很好&#xff0c;集成了当前LLM的主流技术&#xff0c;主要如下 Langchain&#xff1a; 构建在LLM之上的应用开发框架HuggingFace: 模型标准&#xff0c;提供大模型管理功能Vicuna: 一个令GPT-4惊艳的开源聊天机…

❓“如何创业?互联网创业又该如何入手?

&#x1f31f;5大创业建议&#xff0c;让你轻松入门&#xff01; 作为一名互联网创业者&#xff0c;我想分享一下我的创业经验。下面是我的五个建议&#xff0c;希望对你有所帮助&#xff01; &#x1f31f;了解市场需求 在创业之前&#xff0c;了解市场需求非常重要。你需要研…

Docker基本概念+命令

Docker基本概念命令 一、Docker是什么&#xff1f;二、为什么Docker技术受欢迎三、Docker核心概念四、Docker安装五、Docker镜像操作1.搜索镜像2.获取镜像3.镜像加速下载4.查看镜像信息5.查看下载的镜像文件信息6.查看下载到本地的所有镜像7.获取镜像的详细信息8.修改镜像标签9…

STM32MP157驱动开发——按键驱动(异步通知)

文章目录 “异步通知 ”机制&#xff1a;信号的宏定义&#xff1a;信号注册 APP执行过程驱动编程做的事应用编程做的事异步通知方式的按键驱动程序(stm32mp157)button_test.cgpio_key_drv.cMakefile修改设备树文件编译测试 “异步通知 ”机制&#xff1a; 信号的宏定义&#x…

阿里云容器镜像仓库(ACR)的创建和使用

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

【Flume 01】Flume简介、部署、组件

1 Flume简介 Flume是一个高可用、高可靠、分布式的海量日志采集、聚合和传输的系统 主要特性&#xff1a; 它有一个简单、灵活的基于流的数据流结构&#xff08;使用Event封装&#xff09;具有负载均衡机制和故障转移机制一个简单可扩展的数据模型(Source、Channel、Sink) Sou…

若依vue 多table前端HTML页面导出一张Excel表

前言 导入依赖&#xff0c;具体前端vue配置就不介绍了&#xff0c;直接晒具体细节代码 实现 需要在多table外加div&#xff0c;其他都是基本操作js代码 import FileSaver from file-saver import * as XLSX from "xlsx";const htmlToExcel {getExcelNew(classNam…

Windows Server 2019 中文版、英文版下载 (updated Jul 2023)

Windows Server 2019 中文版、英文版下载 (updated Jul 2023) Windows Server 2019 Version 1809&#xff0c;2023 年 7 月更新 请访问原文链接&#xff1a;https://sysin.org/blog/windows-server-2019/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者…

软件测试测试分类(重点)

目录 按照测试对象划分&#xff08;了解&#xff09; ①界面测试 ②可靠性测试&#xff08;可用性&#xff09; ③容错性测试 容错性和可靠性之间的区别 ④文档测试 ⑤兼容性测试 ⑥易用性测试 ⑦安装、卸载测试 ⑧安全测试 ⑨性能测试 内存泄露测试 按照是否查看…

HDFS基本操作命令

这里写目录标题 HDFS Shell CLI客户端说明常用命令hadoop fs -mkdir [-p] <path>hadoop fs -ls [-h] [-R] [<path>...]上传文件到指定目录下方法一:hadoop fs -put [-f] [-p] <localsrc>.....<dst>方法二&#xff1a;hadoop fs -moveFromLocal <loc…

查看docker容器启动参数

查看docker启动参数 1、查看docker容器的自启动策略2、查看docker容器的日志滚动清理策略 以下配置命令以redis容器为例 1、查看docker容器的自启动策略 docker inspect --format{{json .HostConfig.RestartPolicy}} redis输出的name是always 表示此容器是开机自启动的&#x…

uniapp 即时通讯开发流程详解

今天我将为您详细介绍UniApp开发中的即时通讯流程。本文将向您展示如何在UniApp中实现即时通讯功能&#xff0c;为您的应用程序增添交互性和实时性。 1. 准备工作 在开始开发之前&#xff0c;确保您已完成以下准备工作&#xff1a; 确保您已经安装好UniApp开发环境&#xff…

MySQL笔记——表的修改查询相关的命令操作

系列文章目录 MySQL笔记——MySQL数据库介绍以及在Linux里面安装MySQL数据库&#xff0c;对MySQL数据库的简单操作&#xff0c;MySQL的外接应用程序使用说明 文章目录 系列文章目录 一 表的修改操作 1.1 修改表的名字 1.2 添加一列score 1.3 修改列名称 1.4 修改新增列的…

Java刷题记录(小白边刷边学)7.25

Java刷题记录&#xff08;小白边刷边学&#xff09;7.25 1 最长公共前缀 题目分析: 首先一定需要创建一个数组存储最长公共前缀的值 为了方便比较&#xff0c;先把strs的第一个字符串放进新的数组中即strs[0] 因此比较时从strs【1】开始 数字j需要小于两个被比较的字符串的长度…

微服务基础理论

微服务简介 微服务Microservices之父&#xff0c;马丁.福勒&#xff0c;对微服务大概的概述如下&#xff1a; 就目前而言&#xff0c;对于微服务业界并没有一个统一的、标准的定义&#xff08;While there is no precise definition of this architectural style ) 。但通在其…

PostgreSQL实战-数据库迁移部署

PostgreSQL实战-数据库迁移部署 介绍 根据项目需求&#xff0c;我们需要将现有的PostgreSQL数据库重新部署到新的服务器上。由于项目本身就是基于PostgreSQL数据库构建的&#xff0c;因此数据库迁移将变得十分便捷。接下来&#xff0c;我将简要介绍我们的迁移步骤。 迁移步骤…

VMware InstallBuilder Crack

VMware InstallBuilder Crack VMware InstallBuilder是一种开发工具&#xff0c;用于构建桌面和服务器软件的跨平台安装程序。使用InstallBuilder&#xff0c;您可以从单个项目文件和构建环境中快速创建Linux、Windows、Mac OS X、Solaris和其他平台的动态专业安装程序。除了安…

掌握Python的X篇_8_数字与字符串之间的转换(字符串转数字int;数字转字符串str)

本篇将会介绍如何使用Python中的内置函数将数字型变量与字符串变量进行相互转换。 文章目录 1. 字符串转数字2. 数字转字符串 在上篇中写如下代码会报错 In [12]: num1input("请输入num1") 请输入num1345 In [13]: print(num1*10) 345345345345345345345345345345In…

Android平台GB28181设备接入模块之按需编码和双码流编码

技术背景 我们在做执法记录仪或指挥系统的时候&#xff0c;会遇到这样的情况&#xff0c;大多场景下&#xff0c;我们是不需要把设备端的数据&#xff0c;实时传给国标平台端的&#xff0c;默认只需要本地录像留底&#xff0c;如果指挥中心需要查看前端设备实时数据的时候&…

区分能带图

能带结构是目前采用第一性原理&#xff08;从头abinitio&#xff09;计算所得到的常用信息&#xff0c;可用来结合解释金属、半导体和绝缘体的区别。能带可分为价带、禁带和导带三部分&#xff0c;倒带和价带之间的空隙称为能隙。 如果能隙很小或为0 &#xff0c;则固体为金属…