动态添加城市

需求:
点击一个按钮，动态实现添加城市;
实现步骤:
1. 确定事件类型onclick
2. 对于事件绑定一个函数addLiElement()
  1. 获取到用户在input输入框中填写的信息;
    city = document.getElementById(“city”).value
    city = document.getElementsByName(“city”)[0].value
    2). 创建一个城市的文本节点；document.createTextNode(‘xxxx’)
    3). 创建一个li的元素节点; document.createElement(‘xxxx’)
    4). 将文本节点添加到li元素节点里面去;
    5). 将整体添加到ul标签里面去;
    使用appendChild()来添加子节点;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        function addCity(){
//            1) 获取到用户在input输入框中填写的信息;
            var city  = document.getElementById("city").value;


//            2). 创建一个城市的文本节点；
            var textNode = document.createTextNode(city);


//            3). 创建一个li的元素节点;
            var liEleNode = document.createElement('li');


//            4). 将文本节点添加到li元素节点里面去;
            liEleNode.appendChild(textNode);


//            5). 将整体添加到ul标签里面去;
            var ulEleNode = document.getElementById('ul_city');
            ulEleNode.appendChild(liEleNode);



        }


    </script>
</head>
<body>


    <input type="text" placeholder="请输入城市" id='city'>
    <input type="submit" value="添加城市" onclick="addCity()">

<ul id="ul_city">
    <li>北京</li>
    <li>上海</li>
    <li>西安</li>
</ul>

</body>
</html>

在这里插入图片描述

二级联动的实现

1. 需求分析

省市的二级联动

2. 步骤实现

1). 确定事件类型onchange, 并为其绑定一个函数;
2). 修改下拉列表内容;
2-1). 获取用户选择的省份;
2-2). 创建一个二维数组，用来存储省份和城市的对应关系;
2-3). 遍历二维数组中的省份；
2-4). 遍历时省份编号和用户选择的省份编号进行比较，
2-5). 如果相同，遍历该省份下的所有城市;
- 将每一个城市以城市名添加到select里面去;
2-6). 如果不相同，继续循环遍历省份;

扫描二维码关注公众号，回复： 3642280 查看本文章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 0 auto;
            text-align: center;
            margin-top: 10%;
        }
    </style>


    <script>
        function changeCity() {

            // 1. 获取用户选择的省份;
            var choiceProvince = document.getElementById('province').value;
//            alert(choiceProvince);
            // 2. 创建一个二维数组， 用来存储省份和城市的对应关系;
            // 如何创建二维数组？
            var cites=new Array(3);
            // 默认的规则： 索引为0， 存储陕西的城市;
            cites[0] = new Array("西安","宝鸡","咸阳");
            cites[1] = new Array("成都","乐山","绵阳");
            cites[2] = new Array("济南","青岛","烟台");


            //8. 找出关于城市的下拉列表(根据id=“city”)
            var selectEleNode = document.getElementById('city');
            // 9. 清空第二个下拉列表里面的所有option标签;
            selectEleNode.options.length = 0;

            // 3. 遍历时省份编号和用户选择的省份编号进行比较
            for(var i = 0; i < cites.length; i++){
                //此处比较的是省份编号
                if  (choiceProvince == i){
                 // 4. 如果相同， 遍历该省份下的所有城市  ；
                 for(var j=0; j<cites[i].length; j++){
//                     alert(cites[i][j]);
                     //5. 创建城市的文本节点;
                     var textNode = document.createTextNode(cites[i][j]);

                     //6. 创建option的元素节点
                     var optionEleNode = document.createElement("option");

                     //7. 将城市的文本节点追加到option元素节点里面去;
                     optionEleNode.appendChild(textNode);



                     //9. 将option节点内容追加到select节点里面去;
                     selectEleNode.appendChild(optionEleNode);


                 }


                }
                // 5. 如果不相同， 继续循环遍历省份;


            }

        }



    </script>
</head>
<body>
<form>
    <div>
        <span>籍贯：</span>
        <select id='province'  onchange="changeCity()">
            <option>--省份--</option>
            <option value="0">陕西省</option>
            <option value="1">四川省</option>
            <option value="2">山东省</option>
        </select>
        <select id="city">
            <option>--市区--</option>
        </select>
    </div>
</form>
</body>
</html>

在这里插入图片描述

web 动态添加城市和二级联动的实现

动态添加城市

二级联动的实现

1. 需求分析

2. 步骤实现

猜你喜欢