JQuery技术初探之二级联动的设计与实现
来源:互联网 发布:矩阵分解含义 编辑:程序博客网 时间:2024/06/05 08:02
距离上次的博客已经有几天没更新了,今天来回顾一下jquery并且进一步使用jquery完成常见的二级联动的网页应用场景。
框架的源码如下所示,除了如下的框架其实也可以引入json数据进一步降低代码维护的困难和耦合性,这才是开发中常用的方法,但是这里作为一个示例,选择最简单的方法进行演示:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><script>// 定义二维数组,存储城市信息var cities = new Array(4);cities[0] = new Array("市辖区");cities[1] = new Array("长春市","吉林市","松原市","延边市");cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");cities[4] = new Array("南京市","苏州市","扬州市","无锡市");</script><body><select id="province" style="width:150px"><option value="">----请-选-择-省----</option><option value="0">北京</option><option value="1">吉林省</option><option value="2">山东省</option><option value="3">河北省</option><option value="4">江苏省</option></select><select id="city" style="width:150px"><option value="">----请-选-择-市----</option></select></body></html>
1.分析:
(1)根据题目的要求是点击相应的省份弹出相应的市或者直辖市,需要用到一个onchange事件,在select元素下的option发生变化时为这个事件添加动作。
(2)在添加事件之后需要根据获取第一个select选框中的元素动态的添加第二个选框之中的值,同样需要利用jquery获取元素并进行添加(.html方法)
(3)完成这些步骤之后大体上已经完成了80%,需要进一步的优化代码,在添加第二个选框之前清空下拉选框中的内容并再次进行添加请选择的内容
具体的代码实现和文档说明、注释如下所示:
最后是解决的代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script><script>// 定义二维数组,存储城市信息var cities = new Array(4);cities[0] = new Array("市辖区");cities[1] = new Array("长春市","吉林市","松原市","延边市");cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");cities[4] = new Array("南京市","苏州市","扬州市","无锡市");/*$(function(){//1、给province 下拉框绑定事件 change$("#province").change(function(){//1、获取选择的省的信息var val=$(this).val();//2、通过省的信息获取城市的信息var arr = cities[val];//3、each遍历//遍历之前要初始化var city = $("#city");city.html("<option value=''>----请-选-择-市----</option>");$(arr).each(function(){//先把要添加的信息拼接出来var temp = "<option>"+this+"</option>";//追加到city内容体的末尾city.append(temp);});});});*/$(function(){$("#province").change(function(){var index = $(this).val();$("#city").html("<option value=''>----请-选-择-市----</option>");$(cities[index]).each(function(){$("#city").append("<option>"+this+"</option>");});});});</script><body><!-- 1、给province 下拉框绑定事件 onchange 页面加载完成时 2、要去根据省的信息 获取城市信息 3、遍历城市信息数组,jQuery 4、遍历中 jQuery方式 追加内容体 --><select id="province" style="width:150px"><option value="">----请-选-择-省----</option><option value="0">北京</option><option value="1">吉林省</option><option value="2">山东省</option><option value="3">河北省</option><option value="4">江苏省</option></select><select id="city" style="width:150px"><option value="">----请-选-择-市----</option></select></body></html>
0 0
- JQuery技术初探之二级联动的设计与实现
- jQuery实现二级联动
- jquery实现菜单的二级联动
- Jquery实现多行的二级联动
- jquery的ajax实现二级联动
- JQuery实现的二级联动菜单
- 实现二级联动菜单的技术细节
- js中的二级联动技术的实现
- jquery 实现省市二级联动
- jquery实现select二级联动
- jquery实现省市二级联动
- jquery实现二级联动不与数据库交互
- jQuery省市的二级联动
- jquery的ajax函数方式实现市区二级联动
- JQuery实现的简单城市间二级联动
- jQuery判断用户名并实现省市的二级联动
- DWR实现的二级联动
- js二级联动的实现
- 第一个network的代码实现基于mnist数据集
- ServletContext域对象和资源路径读取问题
- leetcode349: Intersection of Two Arrays
- codeforces-337【C思维,贪心】
- 洛谷1120小木棍
- JQuery技术初探之二级联动的设计与实现
- 搬家送书咯!
- MVP模式学习———登陆例子
- TFT-LCD驱动程序设计(系列一)
- 第6节--python数据类型--string
- stm32学习的日子-构建库函数雏形(第1节)—寄存器结构体定义控制点亮G0Kitv2.1 LED2和LED4
- JavaScript树形下拉框
- LED驱动及其测试
- 属性动画的基本实现