JS小项目

紫夜✘

已于 2023-02-09 21:18:43 修改

阅读量175

点赞数

分类专栏： javascript小项目文章标签： html css 前端 Powered by 金山文档

于 2023-02-09 20:31:06 首次发布

本文链接：https://blog.csdn.net/Purple_night_/article/details/128960026

版权

javascript小项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<h1>三级联动</h1>
    请选择省份：<select <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
</head>
<body>
    <h1>三级联动</h1>
    请选择省份：<select name="" id="province"></select>
    请选择城市：<select name="" id="city"></select>
    请选择地区：<select name="" id="area"></select>
    <script  src="E:\JS\.vscode\ch08.js"></script>
</body>
</html>

name="" id="province"></select>
    请选择城市：<select name="" id="city"></select>
    请选择地区：<select name="" id="area"></select>


<script>
    //创建一个三维数组
       let provinces=[];
        provinces["江苏省"]=["南京市","无锡市","苏州市"];
        provinces["吉林省"]=["吉林市","长春市"];
        provinces["陕西省"]=["西安市","宝鸡市","渭南市"];
        let cities=[];
        cities["南京市"]=["宣武区","雨花台区","秦淮区","六合区"];
        cities["无锡市"]=["滨湖区","惠山区","梁西区"];
        cities["苏州市"]=["姑苏区","吴江区"];
        cities["吉林市"]=["龙潭区","丰满区"];
        cities["长春市"]=["南关区","朝阳区","九台区"];
        cities["西安市"]=["长安区","未央区","灞桥区"];
        cities["宝鸡市"]=["临渭区","华州区"];
        cities["渭南市"]=["渭滨区","金台区"];
        //获取元素
        let opro=document.getElementById("province");
        let ocity=document.getElementById("city");
        let oarea=document.getElementById("area");
        //向省份下拉菜单添加选项。
        for(province in provinces){
            opro.add(new Option(province,province))
        }
        //根据省份选择城市
        opro.onchange=function(){
            let sel_val=opro.value;//获取选择的省份
            for(province in provinces){
            if(province==sel_val){
                ocity.innerHTML="";
                    for(cityname in  provinces[province]){
                        ocity.add(new Option(provinces[province][cityname],provinces[cityname]))
                    }
                }
            }
            ocity.add(new Option())
        }
        ocity.onchange=function(){
            let sel_val2=ocity.value;//获取选择的城市
            for(city in cities){
            if(city==sel_val2){
                    oarea.innerHTML="";
                    for(areaname in  cities[city]){
                        oarea.add(new Option(cities[city][areaname],cities[areaname]))
                    }
                }
            }
            oarea.add(new Option())
        }
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul style="list-style: none;">
            <span>选择爱好</span>
            <li><input type="checkbox" name="hb" />爬山</li>
            <li><input type="checkbox" name="hb" />游泳</li>
            <li><input type="checkbox" name="hb" />攀岩</li>
            <li><input type="checkbox" name="hb" />冲浪</li>
            <li><input type="checkbox" name="hb" />说唱</li>
        </ul>
        <input type="button" onclick="setAll()" value="全选" id="qx" />
        <input type="button" onclick="unsetAll()" value="全不选" id="qbx" />
        <input type="button" onclick="setOthers()" value="反选" id="fx" />
    </body>
    <script src="E:\JS\.vscode\demo01.js"></script>
</html>

let hb = document.getElementsByName("hb");
// 全选
function setAll() {
for (var i = 0; i < hb.length; i++) {
    hb[i].checked = true;
}
}
// 全不选
function unsetAll() {
for (var i = 0; i < hb.length; i++) {
    hb[i].checked = false;
}
}
// 反选
function setOthers() {
for (var i = 0; i < hb.length; i++) {
    if (hb[i].checked == false)
        hb[i].checked = true;
    else
        hb[i].checked = false;
}
}