用jquery实现省市联动
<!--
需求:
[1] 动态生成省份选择框。
[2] 当选择了省份的某一项时, 动态改变
城市选择中的列表项。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script src="../JS/jquery-1.8.3.min.js"></script>
<script>
var pros = ['请选择省份','广东省','湖南省','四川省'];
var cities = [
[],
['广州','汕头','珠海','茂名','东莞','惠州'],
['株洲', '长沙', '衡阳', '常德'],
['成都', '达州', '锦阳', '南充']
];
$( init );
function init(){
//{ps} 初始化省份的数据
makeOptions( pros, $("#province") );
}
//{ps} 实现代码的复用
//功能: 产生某个下拉列表的中的数据项。
//返回: 没有返回值.
// arr: 这是一个数组 ==> 所有省份 / 某一个省份的所有城市
// $select: 一个下拉列表的 Jquery 对象
function makeOptions( arr, $select ){
for (var i = 0; i < arr.length; i++){
//创建下拉列表
var option = document.createElement("option");
//把省份添加进去
option.innerText = arr[i];
//设置值,方便之后确定选择的是哪一个
$(option).val(i);
//把option添加进select中
$select.append($(option));
}
}
//{ps} 当省份的值发生改变, 触发以下的函数
function updateCity(){
//把内容清零,不然会一直拼接
//city.options.length = 0;
$("#city option").remove();
makeOptions(cities[$("#province option:selected").val()],$("#city"));
/* for (var i = 0; i < cities.length; i++){
if ($("#province option:selected").val() == i){
for (var j = 0; j < cities[i].length; j++){
var option = document.createElement("option");
$(option).text(cities[i][j]);
$("#city").append($(option));
}
}
}*/
}
</script>
</head>
<body>
<select id="province" onchange="updateCity();"></select>
<select id="city"></select>
</body>
</html>
用jquery实现省市联动的更多相关文章
- jQuery实现省市联动
未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...
- jquery插件-省市联动
由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下 ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- Django(二十)下拉列表-省市联动实例:jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...
- jquery省市联动,根据公司需求而写
//author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...
- Ajax省市联动
以JQuery为JS,写的Ajax省市联动. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- html + ashx 实现Ajax省市联动
基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...
- 省市联动_简单的Demo,适用于各种二级菜单联动
最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...
- 练习: 省市联动(Ajax)
// 示例一: china.xml (位于 src 目录下) <?xml version="1.0" encoding="utf-8"?> < ...
随机推荐
- Pytorch入门中 —— 搭建网络模型
本节内容参照小土堆的pytorch入门视频教程,主要通过查询文档的方式讲解如何搭建卷积神经网络.学习时要学会查询文档,这样会比直接搜索良莠不齐的博客更快.更可靠.讲解的内容主要是pytorch核心包中 ...
- 带你尝鲜LiteOS 组件EasyFlash
摘要:EasyFlash是一个开源的轻量级嵌入式闪存库. 本文分享自华为云社区<LiteOS组件尝鲜-玩转EasyFlash>,作者:Lionlace . 基本介绍 EasyFlash是一 ...
- CF749B Parallelogram is Back 题解
Content 给出平行四边形的三个顶点 \((x_1,y_1),(x_2,y_2),(x_3,y_3)\),求出所有可能的第四个顶点. 数据范围:\(\forall i\in[1,3],-1000\ ...
- 【嵌入式AI】全志 XR806 OpenHarmony 鸿蒙系统固件烧录
欢迎关注我的公众号 [极智视界],回复001获取Google编程规范 O_o >_< o_O O_o ~_~ o_O 大家好,我是极智视界,本教程详细记录了 ...
- Amazing!!CSS 也能实现极光?
在上次写完这篇文章 -- 巧用渐变实现高级感拉满的背景光动画 之后,文章下面的评论有同学留言,使用 CSS 可以实现极光吗? 像是这样: emmm,这有点难为人了.不过,最近我也尝试着去试了下,虽然不 ...
- tomcat下部署两个工程时,只有一个可以访问,另一个出现404错误,该如何解决
tomcat下部署两个工程时,只有一个可以访问,另一个出现404错误,该如何解决 在开发新项目的时候,有时候为了省时,直接把曾经做过的项目工程A拷贝成改名为B工程,然后再在B工程上进行功能的开发, 此 ...
- reducer在react使用
编写store.js 小state reducer 怎么来 纯函数 state+action 生成新的state actions type return{ } state action === s ...
- SpringBoot简单整合Gateway网关
引入依赖 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>s ...
- office2007(word2007)另存为pdf文档
默认office2007(word2007)是没有另存为pdf文档的功能的,需要安装插件 插件地址:https://yvioo.lanzous.com/iO5myedoceh 下载之后直接安装,安装成 ...
- Protobuf 动态加载 .proto 文件并操作 Message
Google Protocol Buffer 的常规用法需要使用 protoc 将 .proto 编译成 .pb.h 和 .pb.cc,这样做效率非常高,但是耦合性也很高.在某些追求通用性而不追求性能 ...