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