使用jquery实现省市二级列表
这里讲用到
jquery 的 each 遍历方法 追加 节点或元素方法 append appendTO 以及 remove 清除节点
<script>
$(function(){
//2.创建二维数组用来存储省份和城市
var cities=new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function(){
//10.清除第二个下拉列表的内容
$("#city").empty();
//1.获取用选择的省份
var val=this.value;
//alert(val);
//3.遍历二维数组中的省份
$.each(cities, function(i,n) {
//alert(i+":"+n)
//4.判断用户选择的省份和遍历的省份
if(val==i){
//5.遍历该省份下的所有城市
$.each(cities[i], function(j,m) {
//alert(m)
//6.创建城市文本节点
var textNode=document.createTextNode(m);
//7.创建option元素节点
var opEle=document.createElement("option");
//8.将城市节点添加到option元素节点中
$(opEle).append(textNode);
//9.将option元素节点加到第二个下拉列表中
$(opEle).appendTo($("#city"));
});
}
});
}); });
</script>
<!--2.确定事件,通过函数传参的方式拿到改变后的城市-->
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city"> </select>
使用jquery实现省市二级列表的更多相关文章
- jquery 实现省市二级联动,附带完整的省市json数据 (粘贴即用)
1.可以单独定义一个js,保存省市json数据. citydata = { "安徽": [ "合肥", "芜湖", "蚌埠&quo ...
- 20行核心代码:jQuery实现省市二级联动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery 实现省市二级联动
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- jQuery_完成省市二级联动
当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- jQuery实现省市联动
未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- 省市二级联动(原生JS)
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- 转:jQuery弹出二级菜单
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
随机推荐
- laravel5.5缓存系统
目录 1 Redis的配置 1.1 安装PRedis 1.2 配置 1.2.1 配置redis数据库 1.2.2 更改session的配置 1.2.3 更改cache配置 1.3 使用redis 2 ...
- Hadoop 原理总结
Hadoop 原理总结 一.Hadoop技术原理 Hdfs主要模块:NameNode.DataNode Yarn主要模块:ResourceManager.NodeManager 常用命令: 1)用 ...
- 《Cracking the Coding Interview》——第18章:难题——题目7
2014-04-29 03:05 题目:给定一个词典,其中某些词可能能够通过词典里其他的词拼接而成.找出这样的组合词里最长的一个. 解法:Leetcode上有Word Break这道题,和这题基本思路 ...
- Windows 2003 IIS服务器配置环境(放.net开发的网站)
配置IIS 安装.Net Framework3.5 安装SQL数据库 IIS的配置与安装步骤: 开始->管理工具->管理您的服务器->添加角色->(配置您的服务器向导)下一步- ...
- DOS程序员手册(三)
56页 第4章DOS和BIOS接口 本章介绍了用户程序访问DOS内核和BIOS所提供的各种服务的方法.为了访问这 些服务,我们可以从任何编程语言中调用各个软件中断,这些中断便是我们在本 ...
- 使用java去对比2个带数学公式的字符串
首先大家看到这个题目,可能会不屑一顾,呵呵,是的,起初我也认为这是个很简单的任务,当任务拿到手里后,经过我作为程序员来讲已经磨炼的无比通透的大脑来讲发现这其实是个坑. 故事的起因是这样的,想开发一款给 ...
- github+git提交 基础用法
git版本管理基本用法: 安装就不用说了 随便一搜 安装完 妥妥的.下边说的是在github从新建一个项目开始: 1.首先打开自己的github地址,如下图所示 点加号 选 New repositor ...
- 六 APPIUM Android 定位方式
文本转自:http://www.cnblogs.com/sundalian/p/5629500.html APPIUM Android 定位方式 1.定位元素应用元素 1.1通过id定位元素 An ...
- TensorFlow dataset API 使用
# TensorFlow dataset API 使用 由于本人感兴趣的是自然语言处理,所以下面有关dataset API 的使用偏向于变长数据的处理. 1. 从迭代器中引入数据 import num ...
- NodeJS05
商品分类模块 分类model const mongoose = require('mongoose') const schema = new mongoose.Schema({ name: { typ ...