前端简单入门第十四讲 使用JavaScript完成省市联动的效果
发布日期:2021-06-30 18:00:43
浏览次数:2
分类:技术文章
本文共 1158 字,大约阅读时间需要 3 分钟。
使用JavaScript完成省市联动的效果
实际开发中大概总会碰到这样的需求:在注册页面上有两个下拉列表框,左侧省份的下拉列表框中的值一改变,右侧的市的下拉列表框中的值也要随之发生变化,也即省市联动。效果类似如下:
要使用JavaScript完成省市联动的效果,首先须知道以下知识点:- JavaScript中创建数组的语法;
- JavaScript中的onchange事件; 下拉列表框改变事件。欲完成省市联动的效果,必然需要有两个下拉框,然后监听一个下拉框的onchange事件,在值发生改变的时候,基于改变后的值去控制后面的下拉框的值。
- JavaScript中DOM的操作——创建元素和添加元素。
知晓上面三个知识点之后,下面我就按照如下步骤使用JavaScript完成省市联动的效果:
- 创建一个HTML文件;
- 确定事件:onchange事件;
- 触发函数,在函数中编写代码;
- 获得到所选择的省份的信息;
- 根据选择的省份的信息获得到对应的数组中的市的数据;
- 遍历数组中的市的信息;
- 创建元素,创建文本,最后将元素添加到第二个列表中。
我在【案例六:使用JS完成省市二级联动效果.html】页面中摘出代表省市的两个下拉列表框:
籍贯
接着编写JavaScript代码完成省市联动的效果:
读者如需查看源码,请参考!
总结
JavaScript中的内置对象
JavaScript中的内置对象有:
下面我稍微叙述一下这些对象常用的方法。- Array Array对象的方法:
- Boolean Boolean对象的方法:
- Date Date对象的方法: 其中要注意getTime()这个方法,它在某些地方有奇效。
- Math Math对象的方法:
- String String对象的方法基本上类似于Java中String类的那些方法。String对象的方法有: 较常用的方法已用红框框出。
JavaScript中的全局函数
JavaScript中的全局函数有:
了解一下以下全局函数:-
parseInt()
解析一个字符串并返回一个整数。例如,parseInt("11");
-
parseFloat()
解析一个字符串并返回一个浮点数。例如,parseFloat("32.09");
-
解码
- decodeURI()
- decodeURIComponent():可对一些特殊字符进行解码
-
编码
- encodeURI()
- encodeURIComponent():可对一些特殊字符进行编码
-
eval
将一段内容当成是JavaScript的代码执行。例如:var sss = "alert('aaaa')";eval(sss);
转载地址:https://liayun.blog.csdn.net/article/details/71246578 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
能坚持,总会有不一样的收获!
[***.219.124.196]2024年04月11日 22时02分40秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【工具使用】新版CSDN-markdown编辑器使用指南
2019-04-30
《知识图谱》阅读笔记(六)
2019-04-30
【NLP学习笔记】中文分词(Word Segmentation,WS)
2019-04-30
【NLP学习笔记】词性标注(Part-of-speech Tagging, POS)
2019-04-30
《知识图谱》阅读笔记(七)
2019-04-30
《知识图谱》阅读笔记(九)
2019-04-30
【超越白皮书7】你需要知道关于ETH2.0的几个事实
2019-04-30
超越白皮书8:穿云而过的闪电网络
2019-04-30
AMM做市无常损失对冲分析系列(一)—— 损益及期权对冲模型构建
2019-04-30
JS中document对象和window对象有什么区别
2019-04-30
【python练习题】遍历1
2019-04-30
【matlab】显示图片且下方显示文字
2019-04-30
关于greater<int>以及类模板的一些理解
2019-04-30
对于时间复杂度的通俗理解
2019-04-30
如何输入多组数据并输出每组数据的和?
2019-04-30
基于CentOS 7的Linux常用命令行命令
2019-04-30
行阶梯型矩阵
2019-04-30
信号量机制
2019-04-30
临界资源与临界区
2019-04-30