市、区/县二级联动选择（根据城市首字母寻找城市）

最新推荐文章于 2022-06-07 00:53:19 发布

Hzzzz_zzzzz

最新推荐文章于 2022-06-07 00:53:19 发布

阅读量933

点赞数

本文链接：https://blog.csdn.net/Zoey_J/article/details/92422957

版权

本文介绍如何实现市、区/县二级联动选择功能，利用HTML、CSS和JavaScript结合Bootstrap布局，其中city.js包含按首字母排序的城市与对应区县数据。

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

效果图：
在这里插入图片描述
（使用bootstrap布局）

html部分

<div class="form-group inform">
    <label class="control-label col-lg-1">居住地:</label>
    <div class="col-lg-11 form-inline the-input">
        <div class="input-group location-chose-box">
            <input type="text" placeholder="选择城市" class="form-control location-chose chose-city">
            <!-- 城市首字母 -->
            <div class="the-detail city-detail">
                <ul class="city-first-letter">
                    <li class="letter-select">热门</li>
                    <li>ABCD</li>
                    <li>EFGH</li>
                    <li>JKLM</li>
                    <li>NOPQ</li>
                    <li>RSTW</li>
                    <li>XYZ</li>
                </ul>
            </div>
        </div>
        <div class="input-group location-chose-box">
            <input type="text" placeholder="选择区/县" class="form-control location-chose chose-area">
            <div class="the-detail area-detail">
                <ul class="area