代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两级联动</title>
<script>
//准备数据
var provinces = [
["深圳市", "东莞市", "惠州市", "广州市"],
["长沙市", "岳阳市", "株洲市", "湘潭市"],
["厦门市", "福州市", "漳州市", "泉州市"]
];
/*
1. 确定事件: onchange
2. 函数: selectProvince()
3:
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息 动态创建城市元素节点
添加到城市select中
*/
function selectProvince() {
var province = document.getElementById("province");
//得到当前选中的是哪个省份
var value = province.value;
//从数组中取出对应的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0; for (var i = 0; i < cities.length; i++) {
var cityText = cities[i];
//动态创建城市元素节点 <option>东莞市</option>
//创建option节点
var option1 = document.createElement("option"); //<option></option>
//创建城市文本节点
var textNode = document.createTextNode(cityText);//东莞市
//将option节点和文本内容关联起来
option1.appendChild(textNode); //<option>东莞市</option>
//添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<form action="">
<!--选择省份-->
<label for="province"></label>
<select onchange="selectProvince()" id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<label for="city"></label>
<select id="city"></select>
</form>
</body>
</html>

JS练习:两级联动的更多相关文章

  1. JS 省市两级联动(不带地区版本)

    基于网上找的一个版本改造,因为项目需求不需要地区只要省.市,所以做了改版,两个input上直接取出了数据 <html> <head> <script src=" ...

  2. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...

  3. Combobox下拉框两级联动

    下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...

  4. 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  5. Jquery实现两级联动

    最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...

  6. 纯js的N级联动列表框 —— 基于jQuery

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  7. ASP_NET实现界面无刷新的DropdownList两级联动效果

    所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在第一个DropdownList ...

  8. Thinkphp 两级联动

    <!-- 前端代码部分--><div class="pop-movegroup" id="salesmanBox"> <dl> ...

  9. ajax_get/post_两级联动

    使用ajax实现菜单联动 通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据. 需求:选择第一个下拉框的值,根据第一个下拉框的值显示第二个下拉框的值 首先使用GET方式. ...

随机推荐

  1. LeetCode 929. Unique Email Addresses (独特的电子邮件地址)

    题目标签:String 题目说明 有两个规则针对于 local name. 所以先把local name 和 domain name 分开. 两个规则是: rule 1:'.' 会被去除. (利用re ...

  2. LeetCode 720. Longest Word in Dictionary (字典里最长的单词)

    Given a list of strings words representing an English Dictionary, find the longest word in words tha ...

  3. 在项目开发中使用Git版本号控制工具以提高效率

    安装Git(linux centos平台) 源代码方式安装 1.装依赖 $ yum install curl-devel expat-devel gettext-devel openssl-devel ...

  4. TS流解析 四

    一 从TS流开始 数字电视机顶盒接收到的是一段段的码流,我们称之为TS(Transport Stream,传输流),每个TS流都携带一些信息,如Video.Audio以及我们需要学习的PAT.PMT等 ...

  5. JSP-Runoob:JSP 日期处理

    ylbtech-JSP-Runoob:JSP 日期处理 1.返回顶部 1. JSP 日期处理 使用JSP最重要的优势之一,就是可以使用所有Java  API.本章将会详细地讲述Java中的Date类, ...

  6. hadoop-Combiner作用用法

    文章来源http://blog.csdn.net/ipolaris/article/details/8723782 reduce的输入每个key所对应的value将是一大串1,但处理的文本很多时,这一 ...

  7. 【转】深入理解Java多态原理

    之前一直知道多态是什么东西,平时敲代码也经常用到多态,但一直没有真正了解多态底层的运行机制到底是怎么样的,这两天才研究明白点,特地写下来,跟各位同学一起进步,同时也希望各位大神指导和指正. 多态的概念 ...

  8. Java注解Annotation的用法 - 自定义Annotation实现

    Java注解又称Java标注,是Java语言5.0版本开始支持加入源代码的特殊语法元数据. Java语言中的类.方法.变量.参数和包等都可以被标注.和Javadoc不同,Java标注可以通过反射获取标 ...

  9. Activity启动模式(GIF 动态演示)

    本文首发在我的个人微信公众号:Android开发圈 引言 关于Activity的启动模式是面试高频问题,在平时开发中,作用也不小,所以还是很有必要搞懂这一块的知识.其实之前也有写过这个主题的文章,但是 ...

  10. HTML--文本域,支持多行文本输入

    当用户需要在表单中输入大段文字时,需要用到文本输入域. 语法: <textarea rows="行数" cols="列数">文本</texta ...