周末出游 - 团结湖公园

IMG_5965

 

 

                    

 

 

开小火车

IMG_5983 

骑大马

IMG_5984

骑小驴
IMG_5995

坐滑梯

IMG_6004 






开飞机

IMG_6014








吃葡萄

IMG_6015

邻家妮妮
IMG_6017 

大树
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三级联动下拉框,也称为省市区三级联动,是常见的前端交互功能之一。下面是一个用JSP实现的例子: 1. 在JSP页面中添加三个select元素,分别对应省、市和区县: ```html 省:<select id="province" name="province" onchange="loadCity()"> <option value="">请选择省份</option> <option value="北京市">北京市</option> <option value="上海市">上海市</option> <<option value="广东省">广东省</option> </select> 市:<select id="city" name="city" onchange="loadDistrict()"> <option value="">请选择城市</option> </select> 区:<select id="district" name="district"> <option value="">请选择区县</option> </select> ``` 2. 在页面底部添加JavaScript代码,用于异步加载对应的市和区县选项: ```javascript function loadCity() { var province = document.getElementById("province").value; var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("city").innerHTML = xmlhttp.responseText; document.getElementById("district").innerHTML = "<option value=''>请选择区县</option>"; } } xmlhttp.open("GET", "getCity.jsp?province=" + province, true); xmlhttp.send(); } function loadDistrict() { var city = document.getElementById("city").value; var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("district").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "getDistrict.jsp?city=" + city, true); xmlhttp.send(); } ``` 3. 在后端编写getCity.jsp和getDistrict.jsp,用于返回对应的市和区县选项: getCity.jsp ```java <%@ page contentType="text/html; charset=UTF-8" language="java" %> <% String province = request.getParameter("province"); if (province.equals("北京市")) { %> <option value="东城区">东城区</option> <option value="西城区">西城区</option> <option value="朝阳区">朝阳区</option> <option value="海淀区">海淀区</option> <option value="丰台区">丰台区</option> <% } else if (province.equals("上海市")) { %> <option value="黄浦区">黄浦区</option> <option value="徐汇区">徐汇区</option> <option value="长宁区">长宁区</option> <option value="静安区">静安区</option> <option value="普陀区">普陀区</option> <% } else if (province.equals("广东省")) { %> <option value="广州市">广州市</option> <option value="深圳市">深圳市</option> <option value="珠海市">珠海市</option> <option value="汕头市">汕头市</option> <option value="韶关市">韶关市</option> <% } %> ``` getDistrict.jsp ```java <%@ page contentType="text/html; charset=UTF-8" language="java" %> <% String city = request.getParameter("city"); if (city.equals("东城区")) { %> <option value="东华门街道">东华门街道</option> <option value="景山街道">景山街道</option> <option value="交道口街道">交道口街道</option> <option value="东四街道">东四街道</option> <option value="灯市口街道">灯市口街道</option> <% } else if (city.equals("西城区")) { %> <option value="西长安街街道">西长安街街道</option> <option value="新街口街道">新街口街道</option> <option value="金融街街道">金融街街道</option> <option value="什刹海街道">什刹海街道</option> <option value="西四街道">西四街道</option> <% } else if (city.equals("朝阳区")) { %> <option value="朝外街道">朝外街道</option> <option value="建外街道">建外街道</option> <option value="呼家楼街道">呼家楼街道</option> <option value="三里屯街道">三里屯街道</option> <option value="团结湖街道">团结湖街道</option> <% } %> ``` 注意事项: 1. 前端需要加载jQuery库或自己实现XMLHttpRequest对象的异步请求。 2. 后端需要根据实际情况编写对应的数据返回逻辑。 3. 代码中的数据仅为示例,实际应用需要根据实际需求进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值