2019-03-04第2次 JavaScript语言基础
第2次 JavaScript语言基础
知识点
(1) . 了解JavaScript的基本数据类型
(2) . 掌握JavaScript的变量和常量的定义及使用
(3) . 掌握JavaScript的运算符和表达式，并具备运用表达式解决问题的能力
(4) . 掌握数组的基本概念、数组的创建及应用
一、 变量的声明和赋值
(一) 描述
JavaScript是一种弱类型语言，没有明确的数据类型，也就是说，在声明变量时，不需要指定变量的类型，变量的类型由赋给变量的值决定。这一点不像C#那样，在声明变量的同时需要指定变量的数据类型。
在JavaScript中，变量是使用关键字var声明的。
(二) 语法
1. 先声明变量再赋值
var width;
width = 5;
var － 用于声明变量的关键字
width － 变量名
2. 同时声明和赋值变量
var catName= “皮皮”;
var x, y, z = 10;
3. 不声明直接赋值
width=5;
4. 经验
-
变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用。
-
JavaScript区分大小写，特别是变量的命名、语句关键字等，这种错误有时很难查找。
5. JavaScript的关键字
[图片上传失败...(image-f37ae8-1551683334504)]
(三) 示例演示
1. 变量的声明与赋值
效果
[图片上传失败...(image-7a0945-1551683334504)]
核心代码
<script type="text/javascript">
var name;
name="张三";
age=20;
document.write(name);
document.write("的年龄是:");
document.write(age);
document.write("岁");
</script>
2. 输出成绩：变量之间的连接
效果
[图片上传失败...(image-5245ec-1551683334503)]
核心代码
<script type="text/javascript">
var name="张小丽";
var score="成绩";
var course="JavaScript";
document.write(name+"的"+course+score+"是最好的！");
</script>
(四) JavaScript的语法约定
JavaScript是一种简单的语言，但必须按照它的规则来使用，下面介绍一些JavaScript的基本规则。
1. 大小写的区分
JavaScript区分大小写，大写字母和小写母是不能互相替换的。
(1) . JavaScript的关键字，如for和if，永远都是小写；
(2) . 内置对象（后面会介绍），如Math和Date是以大写字母开头。
(3) . 对象名称通常是小写，但其方法一般是首字母小写，后面的字母大写，比如charAt().
2. 变量、对象和函数的名称
与C#的命名规范类似，当声明使用变量、对象或函数时，名称 可以包括大小写字母、数字、下划线和美元符号($)，但必须以字母、下划线或美元符号开头。
3. 分号
JavaScript允许开发者自行决定是否以分号结束一行代码。但建议使用分号结束。
(五) 注释
1. 单行
//
2. 多行
/…/
二、 数据类型
(一) 描述
JavaScript是一种弱类型的语言，即数据（变量或常量）在定义时不必指明数据类型，其数据类型可以通过为数据赋值时根据其值来确定是什么类型。
本节将对JavaScript的数据类型进行详细的介绍。JavaScript的数据类型分为三类，有基本数据类型、引用数据类型和特殊数据类型。
其中JavaScript的基本数据类型有数值型、字符串型和布尔型；
引用数据类型是指支持对象编程的类型，
特殊数据类型主要包括NULL（空值）、underfined（未定义）、NaN（非数值）以及转义字符。
(二) 基本数据类型：number类型
1. 描述
JavaScript中定义的最特殊的类型是number类型，这种类型既可以表示32位的整数，又可以表示64位的浮点数。
var iNum=23; //整数
var iNum=23.0; //浮点数
整数也可以表示为八进制或十六进制，八进制首数字必须是0，其后的数字可以是任何八进制数字（07），十六进制首数字也必须是0，后面是任意的十六进制数字和字母（09和A~F）。
var iNum=070;//八进制
var iNum2=0x1f;//十六进制
2. 演示案例：数值型数据的最大值和最小值
效果
[图片上传失败...(image-6cdb0a-1551683334503)]
核心代码
<script type="text/javascript">
document.write("JavaScript支持的最大数值是"+Number.MAX_VALUE);
document.write("
");
document.write("JavaScript支持的最小数值是"+Number.MIN_VALUE);
</script>
(三) 基本数据类型：字符串型
1. 字符串的定义
在JavaScript中，字符串是一组被引号（单引号或双引号）括起来的文本。
var string1="This is a string";
这里跟C#中有一点不同，即在JavaScript中，不区分“字符”或“字符串”的概念。因此，下面的语句也是一个表示字符串。
var oneChar=’A’;
2. 字符串的属性
语法
字符串对象.length
示例
var str="this is JavaScript";
var strLength=str.length; //长度是18
3. 字符串的方法
语法
字符串对象.方法名();
常用方法
|
方法名称
|
说****明
|
|
charAt(index)
|
返回在指定位置的字符
|
|
indexOf(str****，index)
|
查找某个指定的字符串在字符串中首次出现的位置
|
|
substring(index1****，index2)
|
返回位于指定索引index1****和index2****之间的字符串，并且包括索引index1****对应的字符，不包括索引index2****对应的字符
|
|
split(str)
|
将字符串分割为字符串数组
|
|
toUpperCase
|
将字符串中所有的字母全部转换为大写
|
|
concat()
|
用于将两个字符连接，相当于“+****”
|
示例：讲解IndexOf(str,index)
如果找到指定字符串，则返回索引位置，否则返回-1；
index是可选的整数参数，表示从第几个字符开始查看，index的取值为“0~字符串.length-1”，如果该参数省略，则将从字符串的首字符开始查找。
<script type="text/javascript">
var str = "this is JavaScript";
var selectFirst = str.indexOf("Java"); //返回值是8
var selectSecond=str.indexOf("Java",12); //返回值是-1
</script>
(四) 布尔类型
1. 描述
布尔类型只有二个值：true或false.
(五) 特殊数据类型:underfined类型
1. 描述
undefined类型只有一个值，即undefined.
当声明的变量未初始化时，该变量的默认值是undefined.
2. 示例
<script type="text/javascript">
var width;
alert(width);
</script>
(六) 特殊数据类型：null类型
1. 描述
只有一个值的类型是null，是一个表示“什么都没有”的占位符，可以用检测某个变量是否被赋值。
值undefined实际上是值null派生来的，因此JavaScript所以它们定义为相等的。
alert(undefined==null); //返回值true
尽管这两个值相等，但它们含义不同，underfined表示声明了变量但未对该量赋值，null则表示对该变量赋予了一个空值。
(七) 特殊数据类型：NAN类型
1. 描述
NaN（not a numeber的缩写）是JavaScript特有的一个特殊数字类型，表示“非数值”。主要是指程序运行时由于某种原因发生计算错误，产生一个没有意义的数值，这个数值就是NaN。
(八) 特殊数据类型：转义字符
1. 描述
转义字符通常也称为控制字符，它是以反斜杠开头不可显示的特殊字符，利用转义字符可以在字符串中添加不可显示的特殊字符或者避免引号匹配问题。
|
转义字符
|
说明
|
转义字符
|
说明
|
|
\b
|
退格
|
\r
|
回车
|
|
\n
|
换行
|
\’
|
单引号
|
|
\t
|
制表符（TAB）
|
\”
|
双引号
|
|
\f
|
换页
|
\
|
反斜杠
|
(九) 特殊数据类型：typeof运算符
1. 描述
typeof检测变量的返回值
typeof运算符返回值如下：
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：javascript中的对象、数组和null
2. 演示示例：typeof的用法
效果
[图片上传失败...(image-ef381a-1551683334503)]
核心代码
<script type="text/javascript">
document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");
var width,height=10,name="rose";
var date=new Date(); //获得时间日期对象
var arr=new Array(); //定义数组
document.write("width: "+typeof(width)+"
");
document.write("height: "+typeof(height)+"
");
document.write("name: "+typeof(name)+"
");
document.write("date: "+typeof(date)+"
");
document.write("arr: "+typeof(arr)+"
");
document.write("true: "+typeof(true)+"
");
document.write("null: "+typeof(null));
</script>
三、 数组
(一) 描述
同C#中的数组一样，JavaScript中的数组存储具有相同数据类型的一个或多个值的集合。
数组用同一个名称存储一系列的值，用下标区分数组中的每个值，数组的下标从0开始。
JavaScript中的数组也需要先创建、赋值，再访问数组元素，并通过数组的一些方法和属性对数组进行处理。
(二) 创建数组
var 数组名称 = new Array(size);
(三) 为数组元素赋值
var fruit= new Array("apple", "orange", " peach","bananer");
或
var fruit=["apple", "orange", " peach","bananer"];
(四) 访问数组
数组名[下标]
示例
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " bananer ";
[图片上传失败...(image-2843d3-1551683334502)]
(五) 数组的常用属性和方法
1. 属性与方法
|
类别
|
名称
|
描述
|
|
属性
|
length
|
设置或返回数组中元素的数目
|
|
方法
|
join( )
|
把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
|
|
sort()
|
对数组排序
|
|
push()
|
向数组末尾添加一个或更多 元素，并返回新的长度
|
2. 演示示例: 数组方法的应用
效果
[图片上传失败...(image-7039f9-1551683334502)]第2次 JavaScript语言基础
知识点
(1) . 了解JavaScript的基本数据类型
(2) . 掌握JavaScript的变量和常量的定义及使用
(3) . 掌握JavaScript的运算符和表达式，并具备运用表达式解决问题的能力
(4) . 掌握数组的基本概念、数组的创建及应用
一、 变量的声明和赋值
(一) 描述
JavaScript是一种弱类型语言，没有明确的数据类型，也就是说，在声明变量时，不需要指定变量的类型，变量的类型由赋给变量的值决定。这一点不像C#那样，在声明变量的同时需要指定变量的数据类型。
在JavaScript中，变量是使用关键字var声明的。
(二) 语法
1. 先声明变量再赋值
var width;
width = 5;
var － 用于声明变量的关键字
width － 变量名
2. 同时声明和赋值变量
var catName= “皮皮”;
var x, y, z = 10;
3. 不声明直接赋值
width=5;
4. 经验
-
变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用。
-
JavaScript区分大小写，特别是变量的命名、语句关键字等，这种错误有时很难查找。
5. JavaScript的关键字
[图片上传失败...(image-fad491-1551683341806)]
(三) 示例演示
1. 变量的声明与赋值
效果
[图片上传失败...(image-aeda27-1551683341806)]
核心代码
<script type="text/javascript">
var name;
name="张三";
age=20;
document.write(name);
document.write("的年龄是:");
document.write(age);
document.write("岁");
</script>
2. 输出成绩：变量之间的连接
效果
[图片上传失败...(image-6f5ec4-1551683341806)]
核心代码
<script type="text/javascript">
var name="张小丽";
var score="成绩";
var course="JavaScript";
document.write(name+"的"+course+score+"是最好的！");
</script>
(四) JavaScript的语法约定
JavaScript是一种简单的语言，但必须按照它的规则来使用，下面介绍一些JavaScript的基本规则。
1. 大小写的区分
JavaScript区分大小写，大写字母和小写母是不能互相替换的。
(1) . JavaScript的关键字，如for和if，永远都是小写；
(2) . 内置对象（后面会介绍），如Math和Date是以大写字母开头。
(3) . 对象名称通常是小写，但其方法一般是首字母小写，后面的字母大写，比如charAt().
2. 变量、对象和函数的名称
与C#的命名规范类似，当声明使用变量、对象或函数时，名称 可以包括大小写字母、数字、下划线和美元符号($)，但必须以字母、下划线或美元符号开头。
3. 分号
JavaScript允许开发者自行决定是否以分号结束一行代码。但建议使用分号结束。
(五) 注释
1. 单行
//
2. 多行
/…/
二、 数据类型
(一) 描述
JavaScript是一种弱类型的语言，即数据（变量或常量）在定义时不必指明数据类型，其数据类型可以通过为数据赋值时根据其值来确定是什么类型。
本节将对JavaScript的数据类型进行详细的介绍。JavaScript的数据类型分为三类，有基本数据类型、引用数据类型和特殊数据类型。
其中JavaScript的基本数据类型有数值型、字符串型和布尔型；
引用数据类型是指支持对象编程的类型，
特殊数据类型主要包括NULL（空值）、underfined（未定义）、NaN（非数值）以及转义字符。
(二) 基本数据类型：number类型
1. 描述
JavaScript中定义的最特殊的类型是number类型，这种类型既可以表示32位的整数，又可以表示64位的浮点数。
var iNum=23; //整数
var iNum=23.0; //浮点数
整数也可以表示为八进制或十六进制，八进制首数字必须是0，其后的数字可以是任何八进制数字（07），十六进制首数字也必须是0，后面是任意的十六进制数字和字母（09和A~F）。
var iNum=070;//八进制
var iNum2=0x1f;//十六进制
2. 演示案例：数值型数据的最大值和最小值
效果
[图片上传失败...(image-25d6a2-1551683341806)]
核心代码
<script type="text/javascript">
document.write("JavaScript支持的最大数值是"+Number.MAX_VALUE);
document.write("
");
document.write("JavaScript支持的最小数值是"+Number.MIN_VALUE);
</script>
(三) 基本数据类型：字符串型
1. 字符串的定义
在JavaScript中，字符串是一组被引号（单引号或双引号）括起来的文本。
var string1="This is a string";
这里跟C#中有一点不同，即在JavaScript中，不区分“字符”或“字符串”的概念。因此，下面的语句也是一个表示字符串。
var oneChar=’A’;
2. 字符串的属性
语法
字符串对象.length
示例
var str="this is JavaScript";
var strLength=str.length; //长度是18
3. 字符串的方法
语法
字符串对象.方法名();
常用方法
|
方法名称
|
说****明
|
|
charAt(index)
|
返回在指定位置的字符
|
|
indexOf(str****，index)
|
查找某个指定的字符串在字符串中首次出现的位置
|
|
substring(index1****，index2)
|
返回位于指定索引index1****和index2****之间的字符串，并且包括索引index1****对应的字符，不包括索引index2****对应的字符
|
|
split(str)
|
将字符串分割为字符串数组
|
|
toUpperCase
|
将字符串中所有的字母全部转换为大写
|
|
concat()
|
用于将两个字符连接，相当于“+****”
|
示例：讲解IndexOf(str,index)
如果找到指定字符串，则返回索引位置，否则返回-1；
index是可选的整数参数，表示从第几个字符开始查看，index的取值为“0~字符串.length-1”，如果该参数省略，则将从字符串的首字符开始查找。
<script type="text/javascript">
var str = "this is JavaScript";
var selectFirst = str.indexOf("Java"); //返回值是8
var selectSecond=str.indexOf("Java",12); //返回值是-1
</script>
(四) 布尔类型
1. 描述
布尔类型只有二个值：true或false.
(五) 特殊数据类型:underfined类型
1. 描述
undefined类型只有一个值，即undefined.
当声明的变量未初始化时，该变量的默认值是undefined.
2. 示例
<script type="text/javascript">
var width;
alert(width);
</script>
(六) 特殊数据类型：null类型
1. 描述
只有一个值的类型是null，是一个表示“什么都没有”的占位符，可以用检测某个变量是否被赋值。
值undefined实际上是值null派生来的，因此JavaScript所以它们定义为相等的。
alert(undefined==null); //返回值true
尽管这两个值相等，但它们含义不同，underfined表示声明了变量但未对该量赋值，null则表示对该变量赋予了一个空值。
(七) 特殊数据类型：NAN类型
1. 描述
NaN（not a numeber的缩写）是JavaScript特有的一个特殊数字类型，表示“非数值”。主要是指程序运行时由于某种原因发生计算错误，产生一个没有意义的数值，这个数值就是NaN。
(八) 特殊数据类型：转义字符
1. 描述
转义字符通常也称为控制字符，它是以反斜杠开头不可显示的特殊字符，利用转义字符可以在字符串中添加不可显示的特殊字符或者避免引号匹配问题。
|
转义字符
|
说明
|
转义字符
|
说明
|
|
\b
|
退格
|
\r
|
回车
|
|
\n
|
换行
|
\’
|
单引号
|
|
\t
|
制表符（TAB）
|
\”
|
双引号
|
|
\f
|
换页
|
\
|
反斜杠
|
(九) 特殊数据类型：typeof运算符
1. 描述
typeof检测变量的返回值
typeof运算符返回值如下：
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：javascript中的对象、数组和null
2. 演示示例：typeof的用法
效果
[图片上传失败...(image-72581-1551683341806)]
核心代码
<script type="text/javascript">
document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");
var width,height=10,name="rose";
var date=new Date(); //获得时间日期对象
var arr=new Array(); //定义数组
document.write("width: "+typeof(width)+"
");
document.write("height: "+typeof(height)+"
");
document.write("name: "+typeof(name)+"
");
document.write("date: "+typeof(date)+"
");
document.write("arr: "+typeof(arr)+"
");
document.write("true: "+typeof(true)+"
");
document.write("null: "+typeof(null));
</script>
三、 数组
(一) 描述
同C#中的数组一样，JavaScript中的数组存储具有相同数据类型的一个或多个值的集合。
数组用同一个名称存储一系列的值，用下标区分数组中的每个值，数组的下标从0开始。
JavaScript中的数组也需要先创建、赋值，再访问数组元素，并通过数组的一些方法和属性对数组进行处理。
(二) 创建数组
var 数组名称 = new Array(size);
(三) 为数组元素赋值
var fruit= new Array("apple", "orange", " peach","bananer");
或
var fruit=["apple", "orange", " peach","bananer"];
(四) 访问数组
数组名[下标]
示例
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " bananer ";
[图片上传失败...(image-a7884f-1551683341806)]
(五) 数组的常用属性和方法
1. 属性与方法
|
类别
|
名称
|
描述
|
|
属性
|
length
|
设置或返回数组中元素的数目
|
|
方法
|
join( )
|
把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
|
|
sort()
|
对数组排序
|
|
push()
|
向数组末尾添加一个或更多 元素，并返回新的长度
|
2. 演示示例: 数组方法的应用
效果
[图片上传失败...(image-5f2aca-1551683341805)]
核心代码
<script type="text/javascript">
var fruit= "apple, orange, peach,bananer";
var arrList=fruit.split(",");
var str=arrList.join("-");
document.write("分割前："+fruit+"
");
document.write("使用"-"重新连接后"+str);
</script>
3. 经验
更多方法可查阅JavaScrpt Array对象参考手册：http://www.w3school.com.cn/js/jsref_obj_array.asp
四、 课堂作业：省份城市的三级联动
(一) 效果演示
在Web开发中，地区联动是很常见的功能，例如，购物、外卖等需要选择赶写的送货地址，其中省份城市三级联运则是最基础的功能。接下来，我们利用数组保存相关的省份、城市和区域的信息。
(二) 编写HTML页面
<body>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="country"></select>
</body>
(三) 利用数组保存地区数据
利用3个数组分别保存省份、城市和区域信息。
这里只添加几条测试数据.
//省份数组
var provinceArr = ['上海','江苏','河北'];
//城市数组
var cityArr=[
['上海'],
['苏州市','南京市','扬州市'],
['石家庄','秦皇岛','张家口']
];
//区域数组
var countyArr=[
[
['黄浦区','静安区','长宁区','浦东区']
],
[
['虎丘区','吴中区','相城区','姑苏区','吴江区'],
['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
['邗江区','广陵区','江都区']
],
[
['长安区','桥西区','新华区','井陉矿区'],
['海港区','山海关区','北戴河区','抚宁区'],
['桥东区','桥西区','宜化区','下花园区']
]
];
一维数组保存省份，二维数组保存对应的城市，三维数组保存每个城市下的区域。
(四) 自动创建省份下拉菜单
function createOption(obj,data){
for(var i in data){
var op = new Option(data[i],i); //创建下拉菜单中的option
obj.options.add(op); //将选项添加到下拉菜单中
}
}
var province = document.getElementById('province'); //获取省份元素对象
createOption(province,ProvinceArr);
(五) 选择省份后，自动生成对应的城市下拉菜单
var city=document.getElementById('city'); //获取城市下拉菜单的元素对象
province.onchange = function(){
city.options.length = 0; //清空city下的所有原有option
createOption(city,cityArr[province.value]);
};
(六) 选择城市后，自动生成对应区域下拉菜单
//选择城市后，自动生成对应区域下拉菜单
var country = document.getElementById('country');//获取区域下拉菜单的元素对象
city.onchange=function(){ //为城市下拉列表添加事件
country.options.length=0; //清空country下的原有option
createOption(country,countyArr[province.value][city.value]);
};
(七) 修改省份时，更新区别下接菜单
虽然通过以上步骤已经实现了省份城市的三级联动，但是还是存在一些问题，即再次修改省份时，区域的下拉菜单仍然是前一个省份的城市。
接下来，编写代码修改省份Province的onchange事件。具体代码如下：
//选择省份后，自动生成对应的城市下拉菜单
var city=document.getElementById('city'); //获取城市下拉菜单的元素对象
province.onchange = function(){
city.options.length = 0; //清空city下的所有原有option
createOption(city,cityArr[province.value]);
//更新区域
if(province.value>=0){
city.onchange(); //自动添加，城市对应区域下拉菜单
}else{
country.options.length = 0; //清空country下的原有option
}
};
核心代码
<script type="text/javascript">
var fruit= "apple, orange, peach,bananer";
var arrList=fruit.split(",");
var str=arrList.join("-");
document.write("分割前："+fruit+"
");
document.write("使用"-"重新连接后"+str);
</script>
3. 经验
更多方法可查阅JavaScrpt Array对象参考手册：http://www.w3school.com.cn/js/jsref_obj_array.asp
四、 课堂作业：省份城市的三级联动
(一) 效果演示
在Web开发中，地区联动是很常见的功能，例如，购物、外卖等需要选择赶写的送货地址，其中省份城市三级联运则是最基础的功能。接下来，我们利用数组保存相关的省份、城市和区域的信息。
(二) 编写HTML页面
<body>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="country"></select>
</body>
(三) 利用数组保存地区数据
利用3个数组分别保存省份、城市和区域信息。
这里只添加几条测试数据.
//省份数组
var provinceArr = ['上海','江苏','河北'];
//城市数组
var cityArr=[
['上海'],
['苏州市','南京市','扬州市'],
['石家庄','秦皇岛','张家口']
];
//区域数组
var countyArr=[
[
['黄浦区','静安区','长宁区','浦东区']
],
[
['虎丘区','吴中区','相城区','姑苏区','吴江区'],
['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
['邗江区','广陵区','江都区']
],
[
['长安区','桥西区','新华区','井陉矿区'],
['海港区','山海关区','北戴河区','抚宁区'],
['桥东区','桥西区','宜化区','下花园区']
]
];
一维数组保存省份，二维数组保存对应的城市，三维数组保存每个城市下的区域。
(四) 自动创建省份下拉菜单
function createOption(obj,data){
for(var i in data){
var op = new Option(data[i],i); //创建下拉菜单中的option
obj.options.add(op); //将选项添加到下拉菜单中
}
}
var province = document.getElementById('province'); //获取省份元素对象
createOption(province,ProvinceArr);
(五) 选择省份后，自动生成对应的城市下拉菜单
var city=document.getElementById('city'); //获取城市下拉菜单的元素对象
province.onchange = function(){
city.options.length = 0; //清空city下的所有原有option
createOption(city,cityArr[province.value]);
};
(六) 选择城市后，自动生成对应区域下拉菜单
//选择城市后，自动生成对应区域下拉菜单
var country = document.getElementById('country');//获取区域下拉菜单的元素对象
city.onchange=function(){ //为城市下拉列表添加事件
country.options.length=0; //清空country下的原有option
createOption(country,countyArr[province.value][city.value]);
};
(七) 修改省份时，更新区别下接菜单
虽然通过以上步骤已经实现了省份城市的三级联动，但是还是存在一些问题，即再次修改省份时，区域的下拉菜单仍然是前一个省份的城市。
接下来，编写代码修改省份Province的onchange事件。具体代码如下：
//选择省份后，自动生成对应的城市下拉菜单
var city=document.getElementById('city'); //获取城市下拉菜单的元素对象
province.onchange = function(){
city.options.length = 0; //清空city下的所有原有option
createOption(city,cityArr[province.value]);
//更新区域
if(province.value>=0){
city.onchange(); //自动添加，城市对应区域下拉菜单
}else{
country.options.length = 0; //清空country下的原有option
}
};
