扫一扫下方二维码,关注本站官方公众号
获取永久解锁本站全部文章的验证码
还能不定期领现金红包

JavaScript写三层层级联动表单-Go语言中文社区

JavaScript写三层层级联动表单


Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <ul class="container">
        <li class="row">
            <p>省 会</p>
            <div><select name="" id="province">
                <option value="">1</option>;
                <option value="">2</option>;
                <option value="">3</option>;
                <option value="">4</option>;
                <option value="">5</option>;
            </select></div>
        </li>
        <li class="row"> 
            <p>城 市</p>
            <div><select name="" id="city"></select></div></li>
        <li class="row">
            <p>院 校</p>
            <div><select name="" id="school"></select></div>
        </li>
    </ul>
    <script src="js/Allschool.js"></script>
    <script src="js/index.js"></script>
    <!--引入js文件是有顺序的-->
</body>
</html>

All.js

var province = [["00","北京市"],["01","重庆市"],["02","湖北省"],["03","福建省"],["04","江苏省"],["05","河北省"],["06","河南省"],["07","甘肃省"]];
var city = {"00":[["317","北京市"]],
"01":[["001","张掖市"],["0011","武威市"],["003","天水市"],["005","庆阳市"],["003","得到市"],["007","的的市"],["009","分工市"]],
"02":[["009","随时市"],["001","方法市"],["013","如果市"],["007","庆阳市"],["011","皮革市"],["015","的的市"],["017","皮肤市"]],
"03":[["005","高光市"],["003","分隔市"],["005","天水市"],["013","让他市"],["009","得到市"],["007","的的市"],["003","排骨市"]],
"04":[["007","分工市"],["009","客人市"],["001","欧冠市"],["015","佩服市"],["005","股份市"],["001","的的市"],["001","分工市"]],
"05":[["0019","光辉市"],["007","刚刚市"],["007","天水市"],["014","平时市"],["001","得到市"],["003","苹果市"],["011","更好市"]],
"06":[["017","解决市"],["001","版本市"],["009","烹饪市"],["011","庆阳市"],["005","规划市"],["009","耦合市"],["015","分工市"]],
"07":[["011","哈哈市"],["011","欧锦市"],["001","配合市"],["009","频道市"],["003","得到市"],["003","的的市"],["017","客人市"]],};
var allschool ={
    "000":[[0,0,"河西学院"]],
    "001":[[1,0,"武威职业学院"],[1,0,"甘肃工程学院"],[1,0,"甘分学院"]],
    "002":[[0,0,"地方学院"]],
    "003":[[1,0,"房峰辉学院"],[1,0,"甘分学院"],[1,0,"回复学院"]],
    "004":[[0,0,"规划学院"]],
    "005":[[1,0,"结构学院"],[1,0,"腹股沟学院"]],
    "006":[[0,0,"还分学院"]],
    "007":[[1,0,"回放学院"],[1,0,"回复学院"]],
    "008":[[0,0,"个分学院"]],
    "009":[[1,0,"防范学院"],[1,0,"官个学院"]],
    "010":[[0,0,"高光学院"]],
    "011":[[1,0,"官方学院"],[1,0,"反倒是学院"]],
    "012":[[0,0,"方法的学院"]],
    "013":[[1,0,"示符学院"],[1,0,"风格学院"]],
    "014":[[0,0,"分工学院"]],
    "015":[[1,0,"官方的学院"],[1,0,"盖特学院"]],
    "016":[[0,0,"放过他学院"]],
    "017":[[1,0,"送给他学院"],[1,0,"该地学院"]],
    "018":[[0,0,"分隔学院"]],
    "019":[[1,0,"高大上学院"],[1,0,"高收入学院"]],
    "317":[[0,0,"北京大学"],[0,0,"中国人民大学"],[0,0,"清华大学"],[0,0,"北京工业大学"]]
};

index.js

/**
 * 分析数据 通过省会的二维数组中的城市对应的数字...>城市对象的属性 从而找到对象城市数组
 * console.log(province);
 * console.log(city);
 * console.log(allshcool);
 * 
 * 找到city对应的数字 。。。》院校的属性值 从而找到对应的学院数组
 */

(function(){//命名空间,代码块,块级作用域
    var provinceNode = document.getElementById('province');
    cityNode = document.getElementById('city');
    schoolNode = document.getElementById('school');

//省会的获取
var provinceStr='';
for(var i =0;i<province.length;i++){
    //province[i][1];
  provinceStr += '<option value='+province[i][0]+'>'+province[i][1]+'</option>';
    //在两个select中间插入这些代码
}
provinceNode.innerHTML=provinceStr;

 //城市的获取--数组

 var cityArr = city[provinceNode.value];
 //console.log(cityArr);
 var cityStr = '';
 for(var i=0;i<cityArr.length;i++){
     //province[i][1]
     cityStr += '<option value='+cityArr[i][0]+'>'+cityArr[i][1]+'</option>';
 }
cityNode.innerHTML=cityStr;

//院校的获取--数组
//console.log(cityNode.value);
var schoolArr = allschool[cityNode.value];
//console.log(cityNode.value);
var schoolStr = '';
for(var i=0;i<schoolArr.length;i++){
    //province[i][1]
    schoolStr += '<option >'+schoolArr[i][2]+'</option>';
}
schoolNode.innerHTML = schoolStr;





//***关联,联动的事件***
//第一级联动二三级 
provinceNode.onchange = function(){//省会改变 --城市 --院校都会变
//城市的获取--数组

var cityArr = city[provinceNode.value];
//console.log(cityArr);
var cityStr = '';
for(var i=0;i<cityArr.length;i++){
    //province[i][1]
    cityStr += '<option value='+cityArr[i][0]+'>'+cityArr[i][1]+'</option>';
}

cityNode.innerHTML=cityStr;

//院校的获取--数组
//console.log(cityNode.value);
var schoolArr = allschool[cityNode.value];
//console.log(cityNode.value);
var schoolStr = '';
for(var i=0;i<schoolArr.length;i++){
   //province[i][1]
   schoolStr += '<option >'+schoolArr[i][2]+'</option>';
}
schoolNode.innerHTML = schoolStr;


}

//第二级联动第三级
cityNode.onchange=function(){
//院校的获取--数组
//console.log(cityNode.value);
var schoolArr = allschool[cityNode.value];
//console.log(cityNode.value);
var schoolStr = '';
for(var i=0;i<schoolArr.length;i++){
   //province[i][1]
   schoolStr += '<option >'+schoolArr[i][2]+'</option>';
}
schoolNode.innerHTML = schoolStr;

}


})()
 


 

index.css

*{
    padding:0;
    margin: 0;
    list-style: none;/*去掉圆点*/
    
}

body{
    background: aliceblue;
}

.container{
    width: 300px;
    margin: 50px auto;


}

.container li.row{
    width: 100%;
    height: 42px;
    background: white;
    border-radius: 15px;
    margin-top: 10px;

}

li.row p{
    display: inline-block;/*变成行内块*/
    color:#16b7f7;
    line-height: 42px;
    padding: 0 10px;/*上下0,左右10空隙*/


}

li.row p::after{ /* p后面不能有空格*/
    content:"|";
    color:#cccccc;
    padding: 0 0 0 15px;
}

li.row div{
    display: inline-block;
    width: 70%;
    height: 100%;
}

li.row div select{
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border-color: aliceblue;
}

效果展示:

 

版权声明1:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_44853310/article/details/114449714
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-04-08 00:17
  • 阅读 ( 200 )

0 条评论

请先 登录 后评论

官方社群