JavaScript_案例补充

最新推荐文章于 2022-05-23 18:53:38 发布

houzeyu666

最新推荐文章于 2022-05-23 18:53:38 发布

阅读量237

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/houzeyu666/article/details/83050265

版权

学习专栏收录该内容

48 篇文章 2 订阅

订阅专栏

#########JavaScript#########

## 案例一

1. 需求:
点击一个按钮，动态实现添加城市;

2. 实现步骤:
    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() {
            // 获取到用户在input输入框中填写的信息;
            var city = document.getElementById("city").value;
            // 创建一个城市的文本节点；
            var textNode = document.createTextNode(city);
            // 创建一个li元素节点;
            var liEleNode = document.createElement('li');
            // 将文本节点添加到li元素节点里面去；
            liEleNode.appendChild(textNode);
            // 将整体添加到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>
    <li>沈阳</li>
</ul>
</body>
</html>

## 案例二

## 1. 需求分析
省市的二级联动

## 2. 步骤实现

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

- 2-6). 如果不相同，继续循环遍历省份;

<!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() {
            // 获取用户选择的省份;
            var choiceProvince = document.getElementById('province').value;
            // 创建一个二维数组，用来储存省份和城市的对应关系;
            var cities = new Array(3);
            // 默认的规则： 索引为0， 存储陕西的城市;
            cities[0] = new Array("西安", "宝鸡", "咸阳");
            cities[1] = new Array("成都", "乐山", "绵阳");
            cities[2] = new Array("沈阳", "鞍山", "铁岭");
            // 选择关于城市的下拉列表;
            var selectEleNode = document.getElementById('city');
            // 清空第二个下拉列表里面所有的option标签;
            selectEleNode.options.length = 0;
            // 遍历时省份编号和用户选择的省份编号进行比较；
            for (var i = 0; i < cities.length; i++) {
                // 此处比较的是省份编号
                if (choiceProvince == i) {
                    // 如果相同，遍历该省份下的所有城市；
                    for (var j = 0; j < cities[i].length; j++) {
                        // 创建城市文本节点；
                        var textNode = document.createTextNode(cities[i][j]);
                        // 创建option元素节点；
                        var optionEleNode = document.createElement("option");
                        // 将城市的文本节点追加到option元素节点里面去;
                        optionEleNode.appendChild(textNode);
                        // 将option节点内容追加到select节点里面去;
                        selectEleNode.appendChild(optionEleNode);
                    }
                }
            }
        }
    </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>

####################################

houzeyu666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_案例补充

#########JavaScript######### ## 案例一 1. 需求: 点击一个按钮，动态实现添加城市;2. 实现步骤: 1. 确定事件类型onclick 2. 对于事件绑定一个函数addLiElement() 1) 获取到用户在input输入框中填写的信息; city = docum...
复制链接

扫一扫