简单的二级联动js

最新推荐文章于 2024-05-31 10:47:24 发布

悦悦猪

最新推荐文章于 2024-05-31 10:47:24 发布

阅读量1.5k

点赞数 1

分类专栏： PC端文章标签：二级联动

本文链接：https://blog.csdn.net/zhangxiaodui/article/details/79140267

版权

PC端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

马上本小白又要做一个项目的一个小模块了，然后看到里面有个二级联动，其实就是挺简单的那种，但是我还是想记录一下咯！过几天就要用到了嘛！
要求呢：就是两个下拉菜单，一个是请选择电器种类（洗衣机、空调、冰箱），另一个是请选择电器类型（不同电器对应不同的电器类型），好，就是这样简单。下面开始看代码。

<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>
</head>
<body>
    <select id="selectOne"></select>
    <select id="selectTwo"></select>
</body>
<script>
    var selectOne=document.getElementById("selectOne");
    var selectTwo=document.getElementById("selectTwo");
    /*电器种类数组*/
    var arr1=['洗衣机','空调','冰箱'];
    /*电器类型数组 定义成二维数组*/
    var arr2=[['请选择洗衣机类型','大眼机','翻盖机','欧洲窄身机'],['请选择空调类型','窗机','分体式空调'],[]];
    /*先输出第一个下拉菜单*/
    selectOne.innerHTML="";
    for(var i=0;i<arr1.length;i++){
        selectOne.innerHTML+="<option>"+arr1[i]+"</option>";
    }
    /*默认输出第一个下拉菜单对应的内容*/
    for(var i=0;i<arr2[0].length;i++){
        selectTwo.innerHTML+="<option>"+arr2[0][i]+"</option>";
    }
    /*定义onchange事件 根据index输出对应的内容 务必清空*/
    selectOne.onchange=function(){
        var index=this.selectedIndex;
        /*冰箱是没有类型的，所以特殊处理*/
        if(index === 2){
            selectTwo.innerHTML="";
            selectTwo.style.display = 'none';
        }
        /*其他情况，洗衣机，空调*/
        else{
            selectTwo.innerHTML="";
            selectTwo.style.display = 'inline-block';
            for(var i=0;i<arr2[index].length;i++){
                selectTwo.innerHTML+="<option>"+arr2[index][i]+"</option>";
            }
        }
    }
</script>
</html>

好啦，可以复制粘贴代码直接在本地运行一下。到时候我还要根据需求进行相应修改吧，在此记录一下咯！
还有第二种方法，上代码

<!doctype html>
<html>
<head>
    <title> 二级联动 </title>
    <meta charset="utf-8">
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script language="JavaScript" type="text/javascript">
        //定义了电器类别的二维数组
        var arr=[
            ["大眼机","翻盖机","欧洲窄身机"],
            ["窗机","分体式空调"],
            []
        ];
        function getElec(){
            var selectOne=document.form1.one;
            var selectTwo=document.form1.two;
            var arr1=arr[selectOne.selectedIndex - 1];
            //清空下拉框，仅留提示选项
            selectTwo.length=1;
            //将二维数组中的值填充到第二个下拉框中
            for(var i=0;i<arr1.length;i++){
                selectTwo[i+1]=new Option(arr1[i],arr1[i]);
            }
        }
    </script>
</head>
<body>
<form method=POST action="" name="form1">
    <select name="one" onChange="getElec()">
        <option value="0">请选择电器种类 </option>
        <option value="洗衣机">洗衣机 </option>
        <option value="空调">空调 </option>
        <option value="冰箱">冰箱 </option>
    </select>
    <select name="two">
        <option value="0">请选择电器类型 </option>
    </select>
</form>
</body>
</html>

好，结束咯！

悦悦猪

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的二级联动js

马上本小白又要做一个项目的一个小模块了，然后看到里面有个二级联动，其实就是挺简单的那种，但是我还是想记录一下咯！过几天就要用到了嘛！要求呢：就是两个下拉菜单，一个是请选择电器种类（洗衣机、空调、冰箱），另一个是请选择电器类型（不同电器对应不同的电器类型），好，就是这样简单。下面开始看代码。html lang="cn">head> meta charset="UTF-8">
复制链接

扫一扫