常见的三级城市联动

天使的同类

于 2020-10-09 15:52:29 发布

阅读量388

点赞数 1

分类专栏：表单渲染文章标签： html jquery bootstrap

本文链接：https://blog.csdn.net/Summer_JK/article/details/108980070

版权

这篇博客介绍了如何实现三级城市联动的交互效果，通过HTML和jQuery结合后台数据进行下拉菜单渲染。内容包括设置option高度以优化视觉体验，以及展示选择省市区前后的效果。

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

常见的三级城市联动

我这里是请求的后台地址，可根据自己请求的后台数据进行下拉菜单渲染，这里请求过来的数据是省市区级的数据是同级别的，所以需要做省市区的层级区分然后再渲染下拉菜单，下面是案例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/orderPage.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <div class="content">
            <form role="form">
                <div class="form-group countryList">
                    <label><span class="star">*</span>都道府県</label>
                    <select name="" id="" class="form-control province"
                        onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0"
                        onchange="this.size=0">
                        <option value="">请选择都道</option>
                    </select>
                    <select name="" id="" class="form-control city

最低0.47元/天解锁文章

天使的同类

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
常见的三级城市联动

常见的三级城市联动我这里是请求的后台地址，可根据自己请求的后台数据进行下拉菜单渲染，这里请求过来的数据是省市区级的数据是同级别的，所以需要做省市区的层级区分然后再渲染下拉菜单，下面是案例：HTML:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
复制链接

扫一扫

专栏目录