JavaScript（五）级联效果、数组

小小野生程序员

于 2024-07-22 17:44:20 发布

阅读量332

点赞数 4

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_47276069/article/details/140465336

版权

级联效果

下拉列表框

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>

小小野生程序员

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（五）级联效果、数组

例子：实现日期的级联效果，要求在界面中显示年月日，年（2020-2050）月（1-12）日（根据年月判断日期）concat（array1,array2）　　将两个数组并成一个数组（可以拼接任意多个数组）如果要删除指定的元素：可以将数组遍历确定其索引，然后对数组进行截取加拼接。slice（start,end）　　截取数组（不包括end对应的元素）通过选项1的选中内容自动添加选项2的选项内容（手动添加+数组循环添加）第三个元素：需要插入的元素值；options：所有选项的集合（选项的数组）
复制链接

扫一扫