事件练习正反选，二级城市联动，下拉菜单练习

最新推荐文章于 2022-10-27 17:31:32 发布

kevin661996

最新推荐文章于 2022-10-27 17:31:32 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/kevin661996/article/details/109010790

版权

正反选

【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="./zhengfanxuan.css">
</head>
<body>
    <main>
        <div>
<input type="button" value="全选">
<input type="button" value="全不选">
<input type="button" value="反选">
        </div>
    </main>
</body>
<script src="./zhengfanxuan.js"></script>
</html>

【js代码】

//创建需要添加的选项
let arr = ["苹果", "香蕉", "橘子", "榴莲", "石榴", "甘蔗", "葡萄"];
// 获取渲染标签
let mainEle = document.querySelector("main");
let divEle = document.querySelector("div");
let divEle1 = document.createElement("div");
// 渲染
function xuanran(){
    let i = 0
    for (let index in arr) {
        i++;
        let lableEle = document.createElement("lable");
        lableEle.setAttribute("for", `${i}`)
        lableEle.innerHTML = `${arr[index]}`;
        let inputEle = document.createElement("input");
        inputEle.setAttribute("type", "checkbox")
        inputEle.setAttribute("id", `${i}`)
        divEle1.appendChild(lableEle);
        divEle1.appendChild(inputEle);
        mainEle.insertBefore(divEle1, divEle);
    }
}
xuanran()
// 添加事件监听
divEle.addEventListener("click", shijian);
function shijian(e) {
    let event = e || window.event;
    let inputAll=document.querySelectorAll("input[type='checkbox']");
//当点击哪一个是判断其value值
//再对选择框进行勾选操作
    switch (event.target.value) {
        case "全选":
            for(let item of  inputAll){
                item.checked=true;
            }
            break;
        case "全不选":
            for(let item of  inputAll){
                item.checked=false;
            }
            break;
        case "反选":
            for(let item of inputAll){
                if(item.checked){
                    item.checked=false;
                }else{
                    item.checked=true;
                }
            }

    }
}

【HTML页面展示】

下拉菜单

【HTML代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单练习</title>
    <link rel="stylesheet" href="./xiala.css">
</head>
<body>
    <main>
    </main>
</body>
<script src="./xiala.js"></script>
</html>

【js代码】

let arr = [
    { menuname: "菜单一", prductname1: "商品一", prductname2: "商品二", prductname3: "商品三", prductname4: "商品四"},
    { menuname: "菜单二", prductname1: "商品一", prductname2: "商品二", prductname3: "商品三", prductname4: "商品四"},
    { menuname: "菜单三", prductname1: "商品一", prductname2: "商品二", prductname3: "商品三", prductname4: "商品四"}
]
// 创建添加元素
let artEle = document.createElement("article");
let mainEle = document.querySelector("main");
function xuanran() {
    artEle.innerHTML = "";
    for (let index in arr) {
        let divEle = document.createElement("div");
        divEle.innerHTML = `<p data-index="${index}">${arr[index].menuname}</p>`;
        let ulEle = document.createElement("ul");
        ulEle.setAttribute("class", "");
        ulEle.innerHTML = `<li>${arr[index].prductname1}</li> 
                            <li>${arr[index].prductname2}</li> 
                            <li>${arr[index].prductname3}</li> 
                            <li>${arr[index].prductname4}</li>`
    divEle.appendChild(ulEle);
    artEle.appendChild(divEle);
    }
    mainEle.appendChild(artEle);
}
xuanran();
// 添加事件
artEle.addEventListener("click", function (e) {
    let event = e || window.event;
    let index1 = event.target.dataset.index;
    for (let index2 in arr) {
        if (index2 == index1) {
        event.target.nextElementSibling.classList.toggle("yangshi");
         
        }
    }
});

【页面展示】

二级城市联动

【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>
</head>
<body>
    <select name="shengfen" id="shengfen">

    </select>
    <select name="city" id="city"></select>
</body>
<script src="./event.js"></script>
</html>

【js代码】

let province = ["省份","北京", "上海", "天津", "重庆", "河北", "山西", "内蒙古", "辽宁", "吉林", "黑龙江", "江苏", "浙江", "安徽", "福建", "江西", "山东", "河南", "湖北", "湖南", "广东", "广西", "海南", "四川", "贵州", "云南", "西藏", "陕西", "甘肃", "宁夏", "青海", "新疆", "香港", "澳门", "台湾"]
let cities = new Array();
cities[0] ="城市";
cities[1] = "东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆";
cities[2] = "黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明";
cities[3] = "和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县";
cities[4] = "万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川";
cities[5] = "石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水";
cities[6] = "太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城";
cities[7] = "呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟";
cities[8] = "沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛";
cities[9] = "长春,吉林,四平,辽源,通化,白山,松原,白城,延边";
cities[10] = "哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭";
cities[11] = "南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安";
cities[12] = "杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水";
cities[13] = "合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州";
cities[14] = "福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德";
cities[15] = "南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶";
cities[16] = "济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽";
cities[17] = "郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源";
cities[18] = "武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州";
cities[19] = "长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界";
cities[20] = "广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮";
cities[21] = "南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池";
cities[22] = "海口,三亚";
cities[23] = "成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州";
cities[24] = "贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南";
cities[25] = "昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧";
cities[26] = "拉萨,日喀则,山南,林芝,昌都,阿里,那曲";
cities[27] = "西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛";
cities[28] = "兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南";
cities[29] = "银川,石嘴山,吴忠,固原";
cities[30] = "西宁,海东,海南,海北,黄南,玉树,果洛,海西";
cities[31] = "乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏";
cities[32] = "香港";
cities[33] = "澳门";
cities[34] = "台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖";
// 获取渲染下标
let select1=document.querySelector("select[name=shengfen]");
let select2=document.querySelector("select[name=city]");
// 遍历省份下标给第一个下拉表
for(let index in  province){
    let opEle=document.createElement("option");
    opEle.innerHTML=`${province[index]}`;
    opEle.setAttribute("value",`${index}`)
    select1.appendChild(opEle);
}
// 获取第一个下拉菜单的值
select1.addEventListener("change",function(e){
    let event=e||window.event;
        for(let index in cities){
            if(event.target.value==index){
             let arr1=cities[index].split(",");
             xuanran(arr1);
            }
        }
});
// 渲染
xuanran(cities[0].split());
function  xuanran(arr){
    select2.innerHTML="";
    for(let item of arr){
        let opEle1=document.createElement("option");
        opEle1.innerHTML=`${item}`;
        select2.appendChild(opEle1);  
    }
};