js实现省市区选项卡三级联动

ICY___

于 2019-01-17 15:33:44 发布

阅读量938

点赞数

分类专栏： ICY___的前端入门文章标签： js案例省市区选项卡三级联动

本文链接：https://blog.csdn.net/ICY___/article/details/86524810

版权

本文介绍了如何使用JavaScript实现省市区三级联动效果。通过监听文本改变事件，动态生成市、区（县）选项，强调了根据用户行为进行处理以及与后端数据格式的配合的重要性。

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

在网站上，我们经常使用到一些地理位置选项卡，其实原理很简单，利用一些基础语法就能实现。

主要思路：利用文本改变事件，在选项卡上选择对应的省时，动态创建市选项卡的内容，选择市的时候，动态创建区（县）内容

html css 代码：

<!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>三级联动</title>
    <style>
    body{
        margin: 0%;
        padding: 0%;
    }

    </style>
</head>

<body>
    <div class="block">
            省：<select id="city1">
                    <option>请选择</option>
                </select>