用原生JS实现省市联动效果

最新推荐文章于 2022-07-19 13:19:03 发布

雨碎江南ldy

最新推荐文章于 2022-07-19 13:19:03 发布

阅读量459

点赞数

分类专栏： JavaScipt 文章标签：原生JS实现省市联动效果动态给表格添加数据

本文链接：https://blog.csdn.net/weixin_38088097/article/details/100642794

版权

JavaScipt 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

案例需求

请使用原生 JS 完成省市联动效果
静态地址数据如下：{data: [
{province: ”北京”, cities:[“朝阳区”, “西城区”, “东城区”]},
{province: ”河北省”, cities:[“石家庄”, “唐山”, “邯郸”]},
{province: ”山东省”, cities:[“济南”, “泰安”, “青岛”]}
]}
点击保存按钮获取表单各项数据和动态生成表格行将数据显示在表格中.

效果图:
在这里插入图片描述

分析和代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加地址</title>
    <style>
        /*第一个table*/
        .addTable{
            /*border: 1px solid red;*/
            width: 600px;
            margin-left: 20px;
        }
        .addTable tr{
            height: 40px;
        }
        .province,.city{
            width: 200px;
            height: 30px;
        }
        #address,#name,#phone{
            width: 400px;
            height: 30px;
            padding-left: 10px;
        }
        .addBtn{
            width: 80px;
            height: 30px;
            background-color: #2EAEFF;
            border: 1px solid #2EAEFF;
        }
        /*第二个table*/
        .userInfoTable{
            border: 1px solid gray;
           width: 100%;
        }
        .userInfoTable td,.userInfoTable th{
             border: 1px solid gray;
        }
        .firstTr{
            background-color: lightgray;
            height: 30px;
        }
        #tbody tr{
            height: 60px;
            text-align: center;
        }
        .lastTr p:first-child{
            float: left;
        }
        .lastTr p:last-child{
            float: right;
        }
    </style>

    <script>
        /**
         *  省市联动
         *  // 1. 在页面加载完成之后,给第一个select下拉框设置省的数据
         *
         *  // 2. 在点击第一个select中的某一个省时,在第二个select下拉框中设置相应的城市数据
         *
         *  // 3. 把添加数据表格中的数据保存到第二个table表格中
         */


        window.onload = function () {
            var json = {
                data: [
                    {province: "北京", cities:["朝阳区","西城区","东城区"]},
                    {province: "河北省", cities:["石家庄", "唐山", "邯郸"]},
                    {province: "山东省", cities:["济南", "泰安", "青岛"]}
                ]};

            // 1. 在页面加载完成之后,给第一个select下拉框设置省的数据
            // 获取第一个select元素对象
            let provinceEl = document.getElementById("province")
            // 获取所有城市的数据
            for (let i = 0; i < json.data.length; i++) {
                // 在select元素之后追加新的option元素
                provinceEl.innerHTML += `<option value="${i}">${json.data[i].province}</option>`;
            }

            // 2. 在点击第一个select中的某一个省时,在第二个select下拉框中设置相应的城市数据
            // 获取第二个select元素对象
            let cityEl = document.getElementById("city");
            // 给第一个下拉列表select添加onchange事件
            provinceEl.onchange = function () {
                // 获取当前选择option的序号
                let index = this.value;
                // 获取省对应的所有城市的数据
                let cts =  json.data[index].cities;
                // 恢复初始状态
                cityEl.innerHTML = ``;
                for (let i = 0; i < cts.length; i++) {
                    // 在第二个select元素之后追加新的option元素
                    cityEl.innerHTML += `<option value="${i}">${cts[i]}</option>`;
                }
            };

            // 3. 把添加数据表格中的数据保存到第二个table表格中

            // 获取 提交按钮元素对象
            let addBtnEl = document.getElementById("add-btn");
            let addressEl = document.getElementById("address");
            let nameEl = document.getElementById("name");
            let phoneEl = document.getElementById("phone");
            var tbodyEl = document.getElementById("tbody");
            var countEl = document.getElementById("count");
            // 给第一个表格中的提交按钮注册一个点击事件
            addBtnEl.onclick = function () {
                // 获取第一个表格中 所在地区 详细地址 收货人姓名 联系电话 的数据
                let prov_index = provinceEl.value;
                let city_index = cityEl.value;
                // 根据 相应 value值的所有找到相应的省市城市数据
                let prov = json.data[prov_index].province;
                let city = json.data[prov_index].cities[city_index];

                var address = addressEl.value;
                var name = nameEl.value;
                var phone = phoneEl.value;

                tbodyEl.innerHTML += `<tr>
                    <td>${name}</td>
                    <td>${prov}${city}</td>
                    <td>${address}</td>
                    <td>${phone}</td>
                    <td><a href="">操作</a></td>
                </tr>`;

                // 更新表格中的 总人数
                countEl.innerHTML = parseInt(countEl.innerHTML) + 1;

            }


            // 给第二个表格追加一行,把获取的数据保存起来

        }
    </script>
</head>
<body>
<h3>添加地址</h3>
<table class="addTable">
    <tr>
        <td width="100px">所在地区：</td>
        <td>
            <select name="province" class="province" id="province">
                <option value="">---请选择---</option>

            </select>
            <select name="city" class="city" id="city">
                <option value="">---请选择---</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>详细地址：</td>
        <td><input type="text" name="address" id="address"></td>
    </tr>
    <tr>
        <td>收货人姓名：</td>
        <td><input type="text" name="name" id="name"></td>
    </tr>
    <tr>
        <td>练习电话：</td>
        <td><input type="text" name="phone" id="phone"></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" value="保存" class="addBtn" id="add-btn"></td>
    </tr>
</table>

<table class="userInfoTable" cellspacing="0">
    <tr class="firstTr">
        <th>收货人</th>
        <th>所在地区</th>
        <th>详细地址</th>
        <th>电话/手机</th>
        <th>操作</th>
    </tr>
    <tbody id="tbody">
        <tr>
            <td>张三</td>
            <td>北京市海淀区</td>
            <td>金燕龙</td>
            <td>13366668888</td>
            <td><a href="">操作</a></td>
        </tr>
        <tr>
            <td>张三</td>
            <td>北京市海淀区</td>
            <td>金燕龙</td>
            <td>13366668888</td>
            <td><a href="">操作</a></td>
        </tr>
    </tbody>
    <tr class="lastTr">
        <td colspan="5">
            <p>总人数：<span id="count">2</span></p>
            <p>最终解释权归刘达亮所有</p>
        </td>
    </tr>
</table>

</body>
</html>

雨碎江南ldy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用原生JS实现省市联动效果

案例需求请使用原生 JS 完成省市联动效果静态地址数据如下：{data: [{province: ”北京”, cities:[“朝阳区”, “西城区”, “东城区”]},{province: ”河北省”, cities:[“石家庄”, “唐山”, “邯郸”]},{province: ”山东省”, cities:[“济南”, “泰安”, “青岛”]}]}点击保存按钮获取表单各项数据和...
复制链接

扫一扫