JavaScript中的数组
例：JS中的数组可以存放任意类型的数据，可以使用new Array()或[ ] 创建数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var arr1 = new Array();
var arr2 = new Array(3);
var arr3 = new Array("aaa", "nbbb", "ccc", 11);
var arr4 = ["a", "b", "c"];
</script>
</body>
</html>数组的常用属性和方法
| 名称 | 描述 |
| join( ) | 将数组转化为使用指定符号连接的字符串 |
| concat( ） | 将多个数组合并为一个 |
| reverse( ) | 将数组中的元素排序进行反转 |
| sort( ) | 对数组进行排序 |
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var arr1 = [1, 2, 3, "李四", "张三"];
var arr2 = ["aaa", "bbb", "ccc", "ddd"];
//先将两个数组合并，然后将合并之后的数组今反转，再根据反转之后的数组进行排序（默认升序）
document.write(arr1.concat(arr2).reverse().sort());
</script>
</body>
</html>数组的应用-省市级联
补充知识：display属性
- 通过对象的display属性设置显示样式
- object.style.display = state;
| 值 | 描述 |
| none | 不显示内容块且不保留内容块所占据的空间 |
| inline | 设置元素同行显示，不允许设置元素的大小 |
| block | 块状显示且独占一行，可以设置元素的大小 |
| inline-block | 块状显示，并非独占一行，可以设置元素的大小 |
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="username" placeholder="请输入用户名" />
<!-- display表示显示方式:
1. none 隐藏
2. display 显示(块状)
3. inline 显示(行级)
4. inline-block 以行级显示,但本质上是个"块" -->
<div id="mydiv" style="display: inline-block; border: 1px solid red;color: blue;">
用户名不能为空
</div>
</body>
</html>下拉列表框的常用属性、方法和事件
属性：
| 值 | 描述 |
| value | 下拉列表框中已选择的选项的值 |
| text | 设置或返回某个选项的纯文本值 |
| options | 存放下拉列表框中所有选项的数组 |
| selectedIndex | 返回已选择的选项在options中的索引 |
| length | 返回下拉菜单中选项的个数 |
方法：
| add(new,old) | 将option的新对象new添加至对象old之前，old参数不存在时，新对象将直接被添加到options数组的末尾 |
事件：
| onChange | 当选项发生改变时产生 |
省市级联实现案例的四种方式
例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
请选择你的城市:
<!-- onChange在切换列表选项时触发 -->
<select id="province" onchange="cascade1()">
<option value="">--请选择省份--</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
</select>
省
<select id="city">
<option value="">--请选择城市--</option>
</select>
<script>
//封装一个函数，返回值是一个指定id值的element元素对象，简化书写
function $(obj){
return document.getElementById(obj);
}
function cascade1() {
//定义下拉列表的动态数组，现在的案例都是写死数据，如果学习了后端，可以从后端拿到数据，变成正在意义上的动态数组
var hn = ["郑州", "洛阳", "开封"];
var hb = ["石家庄", "保定", "邯郸"];
//获取选择的省份
var province = $("province").value;
//每次选择,清空之前的数据（防止添加数据）
$("city").options.length = 0;
//定义两个if分支进行条件判断
if (province == "河南") {
for (var i = 0; i < hn.length; i++) {
var opt = document.createElement("option");
// opt.innerHTML = hn[i];
//没有出现标签，使用innerText或innerHTML都可以
//将数据添加到option中的文本区域
opt.innerText=hn[i];
//将数据添加到option中的value属性值
opt.setAttribute("value", hn[i]);
//将创建的option元素对象添加到id为city的下拉列表中
$("city").appendChild(opt);
}
}
if (province == "河北") {
for (var i = 0; i < hb.length; i++) {
var opt = document.createElement("option");
opt.innerHTML = hb[i];
opt.setAttribute("value", hb[i]);
$("city").appendChild(opt);
}
}
}
</script>
</body>
</html>例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
请选择你的城市:
<!-- onChange在切换列表选项时触发 -->
<select id="province" onchange="cascade2()">
<option value="">--请选择省份--</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
</select>
省
<select id="city">
<option value="">--请选择城市--</option>
</select>
<script>
//封装一个函数，返回值是一个指定id值的element元素对象，简化书写
function $(obj){
return document.getElementById(obj);
}
function cascade2() {
var hn = ["郑州", "洛阳", "开封"];
var hb = ["石家庄", "保定", "邯郸"];
//获取选择的省份
var province = $("province").value;
//每次选择,清空之前的数据
$("city").options.length = 0;
if (province == "河南") {
for (var i = 0; i < hn.length; i++) {
var opt = document.createElement("option");
//和例1相比，只是将设置文本数据和设置value属性值的方式更改了
opt.value = hn[i];
opt.text = hn[i];
$("city").appendChild(opt);
}
}
if (province == "河北") {
for (var i = 0; i < hb.length; i++) {
var opt = document.createElement("option");
opt.value = hb[i];
opt.text = hb[i];
$("city").appendChild(opt);
}
}
}
</script>
</body>
</html>例3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
请选择你的城市:
<!-- onChange在切换列表选项时触发 -->
<select id="province" onchange="cascade3()">
<option value="">--请选择省份--</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
</select>
省
<select id="city">
<option value="">--请选择城市--</option>
</select>
<script>
//封装一个函数，返回值是一个指定id值的element元素对象，简化书写
function $(obj){
return document.getElementById(obj);
}
function cascade3() {
//下面三行实际上就是创建一个二维数组，存放数据
var arr = new Array(2);
arr["河南"] = ["郑州", "洛阳", "开封"];
arr["河北"] = ["石家庄", "保定", "邯郸"];
var province = $("province").value;
$("city").options.length = 0;
//使用for-in 结构遍历二维数组中的一维数组的数据，index指的是每个数组中取出的下标位置
for (var index in arr[province])
//创建一个option元素对象
var opt = document.createElement("option");
opt.value = arr[province][index];
opt.text = arr[province][index];
//将option元素对象添加到下拉列表中
$("city").options.add(opt);
}
}
</script>
</body>
</html>例4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
请选择你的城市:
<!-- onChange在切换列表选项时触发 -->
<select id="province" onchange="cascade4()">
<option value="">--请选择省份--</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
</select>
省
<select id="city">
<option value="">--请选择城市--</option>
</select>
<script>
//封装一个函数，返回值是一个指定id值的element元素对象，简化书写
function $(obj){
return document.getElementById(obj);
}
function cascade4() {
var arr = new Array(2);
arr["河南"] = ["郑州", "洛阳", "开封"];
arr["河北"] = ["石家庄", "保定", "邯郸"];
var province = $("province").value;
$("city").options.length = 0;
for (var index in arr[province]) {
//使用option的构造方法创建对象，Option()构造函数接受两个参数：文本(text)和值(value);
var opt = new Option(arr[province][index], arr[province][index]);
$("city").options.add(opt);
}
}
</script>
</body>
</html>以上是基于JS的数组实现省市级联的下拉列表的应用，由于没有出现后端数据，此时都是将数据写死在数据中，并非真正的动态数据
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
