JavaScript（五）
级联效果
下拉列表框
1.利用省份下拉框的选项改变事件onChange
2.根据用户选择的省份，动态添加城市下拉框的值
下拉列表框SELECT
常用属性
length：选项的数量
value：每个选项的value值
options：所有选项的集合（选项的数组）
selectedIndex：选中的选项在options中的索引
选项数组
1、每个选项Option可以动态创建
new Option("显示内容"，"值")
2、动态添加选项
selCity.options.add(newOption1）
3、清除选项
selCity.options.length=0
下拉列表框的基本用法实例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="province">
<option value="js">江苏省</option>
<option value="sd">山东省</option>
<option value="zj">浙江省</option>
</select>
</body>
</html>
<script type="text/javascript">
//获取下拉列表框
var sel = document.getElementById("province");
//获取下拉列表框的选项的数量
console.log(sel.length);
length属性可读可写（确定数组长度只剩一个，用来从后往前开始删除）
sel.length = 1;
//通过options根据索引删除选项（删除指定的元素：索引从0开始）
sel.options.remove(1);
//添加新的选项 第一个参数表示选项的文本值，第二个参数表示选项的值(value)
sel.options.add(new Option("海南省","hn"));
//绑定选项变更的事件
sel.onchange = function(){
//获取选项的值
alert(this.value);
//获取选中项的索引 从0开始
alert(this.selectedIndex);
}
</script>
数组：
创建方式三种：
第一种：
var array=new Array(); array[0]=“A”; array[1]=“B”; array[2]=“C”;
第二种：
var array=new Array(“A”,”B”,”C”);
第三种：
var array=[“A”,”B”,”C”];
数组中常用的方法：
sort 顺序排列
reverse 反转内容
join（string） 将数组中的元素使用字符串连接
concat（array1,array2） 将两个数组并成一个数组（可以拼接任意多个数组）
slice（start,end） 截取数组（不包括end对应的元素）
splice（index,count,item） 删除元素并添加新值：
第一个参数：替换开始的索引；
第二个参数：替换的元素个数；
第三个元素：需要插入的元素值；
push 将元素添加至最后一个元素
pop 将数组中最后一个元素删除（可以用变量获取该数值）
如果要删除指定的元素：可以将数组遍历确定其索引，然后对数组进行 截取 加 拼接
function deleteArray(array,value){ //查找元素的索引，默认该元素不存在 var index = -1 //遍历数组 for(var i = 0; i < array.length; i++){ if(array[i] == value){ //记录索引 index = i; break; } } if(index != -1){ //截取删除元素的前后部分 var before = array.slice(0,index); var after = array.slice(index+1); //拼接数组 var newArray = before.concat(after); return newArray; } return array; }
用splice（index,count）方法实现删除：
function deleteArray(array,value){ //查找元素的索引，默认该元素不存在 var index = -1 //遍历数组 for(var i = 0; i < array.length; i++){ if(array[i] == value){ //记录索引 index = i; break; } } if(index != -1){ //如果第三个元素不写，就是将这个元素删除，不插入值 var newArray = splice(index,1); return newArray; } //如果没找到就返回原数组 return array; }
数组的常用方法示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var array = new Array("D","A","E","F","C","B");
//对数组进行排序
//只能进行升序排列
array.sort();
//对数组进行反转
//先升序排列，再进行反转可以实现降序排列
array.reverse();
//将数组的每个元素根据指定参数拼接成一个字符串
var str = array.join("#");
console.log(str); //（A#B#C#D#E#F）
//将两个数组合并为一个数组
var array1 = new Array("A","B","C");
var array2 = new Array("a","b","c");
var newArray = array1.concat(array2);
console.log(newArray);
//根据索引截取数组
//从索引2的位置一直截取到数组最后一个元素
array = array.slice(2);
//从索引2的位置一直截取到索引4为止
array = array.slice(2,4);
//将元素写入数组的最后
array.push("X");
//将最后个元素删除，并返回删除的元素
var value = array.pop();
console.log(value);
//将指定索引的元素替换成新的元素值
//第一个参数表示替换的起始索引，第二个参数表示替换的元素数量，第三个参数表示替换的新值
array.splice(1,2,"a");
//如果第三个参数没有填写，则表示根据指定索引位置删除指定的元素的数量
array.splice(1,2);
function deleteArray(array,value){
//查找元素的索引，默认该元素不存在
var index = -1
//遍历数组
for(var i = 0; i < array.length; i++){
if(array[i] == value){
//记录索引
index = i;
break;
}
}
if(index != -1){
//截取删除元素的前后部分
var before = array.slice(0,index);
var after = array.slice(index+1);
//拼接数组
var newArray = before.concat(after);
return newArray;
}
return array;
}
array = deleteArray(array,"E");
console.log(array);
</script>
通过选项1的选中内容自动添加选项2的选项内容（手动添加+数组循环添加）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="province">
<option>--请选择--</option>
<option >江苏</option>
<option >山东</option>
<option >浙江</option>
</select>
<select id="city">
<option>--请选择--</option>
</select>
</body>
</html>
<script type="text/javascript">
//获取下拉列表框对象
var province = document.getElementById("province");
var city = document.getElementById("city");
//存储所有城市的数组
var array = new Array();
array[0] = new Array("苏州","无锡","南京");
array[1] = new Array("青岛","济南","烟台");
array[2] = new Array("杭州","嘉兴","宁波");
province.onchange = function(){
//删除之前的城市选项
city.length = 1;
//获取选择的省份的索引
var index = province.selectedIndex;
//根据省份的索引将对应的城市选项添加至城市下拉列表框
//手动添加
// if(index == 1){
// var city1 = new Option("苏州","sz");
// var city2 = new Option("无锡","wx");
// var city3 = new Option("南京","nj");
// city.options.add(city1);
// city.options.add(city2);
// city.options.add(city3);
// }
// else if(index == 2){
// var city1 = new Option("青岛","qd");
// var city2 = new Option("济南","jn");
// var city3 = new Option("烟台","yt");
// city.options.add(city1);
// city.options.add(city2);
// city.options.add(city3);
// }
// else if(index == 3){
// var city1 = new Option("杭州","hz");
// var city2 = new Option("嘉兴","jx");
// var city3 = new Option("金华","jh");
// city.options.add(city1);
// city.options.add(city2);
// city.options.add(city3);
// }
//使用数组，根据选择的省份的索引，动态添加城市
for(var i = 0; i < array[index-1].length; i++){
//添加选项
city.options.add(new Option(array[index-1][i],array[index-1][i]));
}
}
</script>
例子：实现日期的级联效果，要求在界面中显示年月日，年（2020-2050）月（1-12）日（根据年月判断日期）
例子：通过数组进行实现抽奖效果
通过随机遍历获取数组中的值
通过innerHTML将数组中的值写入文本框中
写入以后将该值从数组中删除
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.container{
width: 400px;
border: 1px solid;
margin: auto;
margin-top: 100px;
}
.content{
height: 400px;
background-color: gray;
color: white;
font-size: 50px;
line-height: 400px;
text-align: center; //居中显示
}
.btnDiv{
text-align: center;
}
.result{
color: #363CD2;
width: 1000px;
margin: auto;
margin: 50px;
}
</style>
<body>
<div class="container">
<!-- 滚动抽奖字幕 -->
<div class="content">admin</div>
<!-- 抽奖按钮 -->
<div class="btnDiv">
<input type="button" class="btn" value="抽奖" name="">
</div>
</div>
<!-- 中奖的结果名单 -->
<div class="result"></div>
</body>
</html>
<script type="text/javascript">
//存储抽奖的名单
var array = new Array("梅明川","伟文浩","温浩","顾明宇","黄进午","徐泽",
"李裕涛","钮胜","宫凤丽","杭文鹏","宣磊");
var content = document.querySelector(".content");
var btn = document.querySelector(".btn");
var result = document.querySelector(".result");
//定时器
var timer;
/**
* 轮播显示中奖信息
* [play description]
* @return {[type]} [description]
*/
function showName(){
//产生一个随机索引：如果是5个人，则需要产生0-4，则将0-1乘以人数产生结果0.00001-5.99999，然后parseInt使其丢失精度（或者用Math.floor向下取整）
var index = parseInt(Math.random()*array.length);
//根据索引获取数组中的元素
var value = array[index];
//将元素显示在层中
content.innerHTML = value;
//开启定时器反复显示抽奖的信息
timer = window.setTimeout("showName()",50);
}
//调用显示名单的方法
showName();
//点击按钮之后需要执行的操作
btn.onclick = function(){
//如果值为抽奖，则点击后出现中奖名单（停止循环并将抽到的并获取该元素的值查找索引后将元素删除）
if(this.value == "抽奖"){
//点击关闭按钮就要关闭定时器
window.clearTimeout(timer);
//获取content中目前显示的值，写入中奖名单的层中
var value = content.innerHTML;
//获取元素在数组中的索引
var index = arrayIndex(array,value);
//将该值从数组中删除
array.splice(index,1);
//将该值显示在result层中
result.innerHTML+="<span style='margin-right:20px'>"+value+"</span>";
//修改按钮的文本
this.value = "继续";
console.log(array.length);
//数组的长度，如果长度为0
if(array.length == 0){
content.innerHTML = "GameOver";
//禁用按钮
btn.disabled = true;
}
}
//如果按钮是继续，则继续循环名单
else{
showName();
this.value = "抽奖";
}
}
//获取元素索引的方法
function arrayIndex(array,value){
for(var i = 0; i < array.length; i++){
if(array[i] == value){
return i;
}
}
}
</script>
浙公网安备 33010602011771号