JavaScrpit+Html实现省市联动(应用场景:输入地址信息)
文章目录
前言
在目前我们的各个系统当中最重要的就是要保存客户的信息,这就包括地址信息等,肯定不会让客户去手动输入这样用户感体验极差,所以推出使用下拉框进行选择,这样可以有效的去维护和使用,下面介绍页面实现方式
提示:以下是本篇文章正文内容,下面案例可供参考
一、什么是JavaScrpit?
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。(百度百科)。
二、什么是Css?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 (百度百科)。
三、什么是Html?
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 。(百度百科)。
四、JavaScrpit前端代码实现
1.创建一个文本然后打开
创建.txt文本,然后写上代码保存,然后将文本后缀改为.html保存,使用浏览器打开即可
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>省市联动</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
//声明一个json数组,用于保存所有的省份信息
var aSheng =
[
{shengno:"hlj",shengname:"黑龙江"},
{shengno:"jl",shengname:"吉林"},
{shengno:"ln",shengname:"辽宁"}
];
//声明一个json数组,用于保存城市信息
var aCity =
[
{cityno:1,cityname:"哈尔滨",shengno:"hlj"},
{cityno:2,cityname:"牡丹江",shengno:"hlj"},
{cityno:3,cityname:"长春",shengno:"jl"},
{cityno:4,cityname:"延吉",shengno:"jl"},
{cityno:5,cityname:"沈阳",shengno:"ln"},
{cityno:6,cityname:"大连",shengno:"ln"}
]
window.onload=function()
{
showSheng();
}
/**
根据aSheng中信息生成省份记录
*/
function showSheng()
{
//抓到省份下拉列表
var oShengSelect = document.getElementById("sheng");
//遍历aSheng中的所有省份
for(var i=0;i<aSheng.length;i++)
{
var oSheng = aSheng[i];
//根据oSheng创建Option
var oOption = document.createElement("option");
oOption.text = oSheng["shengname"];
oOption.value = oSheng["shengno"];
//将option放入select对象
oShengSelect.add(oOption);
}
}
/**
根据省份id生成对应的城市信息
*/
function showCity(shengid)
{
//在城市下拉列表中生成城市记录
var oCitySelect = document.getElementById("city");
//现将城市下拉列表中显示信息清空
//抓到oCitySelect下的所有option
var aOption = oCitySelect.options;
//删除
for(var i=aOption.length-1;i>0;i--)
{
oCitySelect.remove(i);
}
//遍历aCity中的每个城市(根据shengid在aCity中找出对应的城市信息)
for(var i=0;i<aCity.length;i++)
{
var oCity = aCity[i];
//判读oCity是否为shengid的城市
if(oCity.shengno == shengid)
{
//根据城市信息生成option
var oOption = document.createElement("option");
oOption.text = oCity.cityname;
oOption.value = oCity.cityno;
//放入城市下拉列表中
oCitySelect.add(oOption);
}
}
}
</script>
</HEAD>
<BODY>
省份:
<select id='sheng' onchange='showCity(this.value)'>
<option value=''>请选择省份</option>
</select>
城市:
<select id='city'>
<option value=''>请选择城市</option>
</select>
</BODY>
</HTML>
1、 标签 <script></script>
体里面要写js的代码,逻辑处理的代码。
2、 标签 <style></style>
体里面要写css的代码,页面展示的样式。
3、 标签 <BODY></BODY>
体里面主要是展示页面的内容。
4、 标签 <HEAD></HEAD>
体里面主要是标题头格式区。
5、 标签 <HTML></HTML>
体是整个页面的区域。
6、 标签 <TITLE>省市联动</TITLE>
体是整个页面的标题名称。
2.效果实现
总结
如果没有编辑器那就在页面创建一个.txt文本,然后写上代码保存,然后将文本后缀改为.html保存,使用浏览器打开即可。