LV2之------DOM操作（JS & JQ 二级联动菜单的四种方法 & 多选反选& 文本框内容相互剪切)------练习

最新推荐文章于 2024-03-27 23:32:00 发布

水兮泱泱

最新推荐文章于 2024-03-27 23:32:00 发布

阅读量556

点赞数

分类专栏：编程练习前端LV2 JS 文章标签： dom练习二级菜单联动详细方法实现多选与反选

本文链接：https://blog.csdn.net/DU123_/article/details/89681037

版权

本文介绍了使用JS和JQuery实现二级联动菜单的四种方法，详细讲解了如何实现多选与反选功能，并通过实例展示了两个文本框内容相互剪切的操作。内容包括代码实现和关键知识点解析。

摘要由CSDN通过智能技术生成

一 . 实现省与市的二级联动菜单 (分别使用四种办法实现)

实现如图: 在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js之dom入门练习</title>
    <style>

    </style>
</head>

<body>

 <!--        练习一   实现二级联动菜单          -->

    <!--  建立 省 的下拉框 -->
    <select id="province" onchange="setCity()">
        <option value="0">--请选择省份--</option>
        <option value="1">四川</option>
        <option value="2">北京</option>
        <option value="3">上海</option>
        <option value="4">广州</option>
    </select>
    <!-- 建立 市 的下拉框, 其内容在下面用dom添加 -->
    <select name="" id="city">

    </select>
    <script>
        var province = document.getElementById("province")
        var cities = document.getElementById("city")
       //  下面以 每个市对应的城市 创建展示4种方法,          建议使用方法4----inerhtml 最高效.
        function setCity() {
   
            // 方法1  
            if (province.value == 1) {
   
                city.length = 0;     //注意此处要 设置长度为0，否则前面的省的城市 会和后面省对应的城市累加在一起
                var opt1 = document.createElement("option")
                var opt1Text = document.createTextNode("成都")
                opt1.appendChild(opt1Text)
                city.appendChild(opt1)

                var opt2 = document.createElement("option")
                var opt2Text = document.createTextNode("南充")
                opt2.appendChild(opt2Text)
                city.appendChild(opt2)

                var opt3 = document.createElement("option")
                var opt3Text = document.createTextNode("德阳")
                opt3.appendChild(opt3Text)
                city.appendChild(opt3)
            }
            // 方法2
            else if (province.value == 2) {
   
                city.length = 0;//注意此处要 设置长度为0，否则前面的省的城市 会和后面省对应的城市累加在一起
                var beijingCity = ['天安门', '长城', '朝阳']
                for (var i = 0; i < beijingCity.length; i++) {
   
                    var opt1 = document.createElement("option")
                    var opt1Text = document.createTextNode(beijingCity[i])
                    opt1.appendChild(opt1Text)
                    city.appendChild(opt1)
                }

            }
            //方法3
            else if (province.value == 3) {
   
                city.length = 0;注意此处要 设置长度为0，否则前面的省的城市 会和后面省对应的城市累加在一起
                var shanghaiCity = ['浦东', '浦西', '外滩']
                for (var i