原生js+css实现微信风格底部弹出省市区选择器代码-html代码-BFW代码库

代码语言：html
所属分类：选择器
代码描述：原生js+css实现微信风格底部弹出省市区选择器代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
<style>
     * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;
 }
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
     min-height: 100vh;
     padding: 20px;
     color: #333;
     line-height: 1.6;
 }
 
 .container {
     max-width: 480px;
     margin: 0 auto;
     background: white;
     border-radius: 16px;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
     padding: 25px;
     position: relative;
     overflow: hidden;
 }
 
 .header {
     text-align: center;
     margin-bottom: 30px;
     position: relative;
 }
 
 .header::after {
     content: '';
     display: block;
     width: 60px;
     height: 4px;
     background: #07C160;
     border-radius: 2px;
     margin: 12px auto 0;
 }
 
 h1 {
     font-size: 26px;
     color: #333;
     font-weight: 600;
 }
 
 .description {
     text-align: center;
     color: #666;
     margin-bottom: 30px;
     font-size: 15px;
     line-height: 1.5;
 }
 
 .form-group {
     margin-bottom: 25px;
 }
 
 label {
     display: block;
     margin-bottom: 10px;
     font-size: 16px;
     color: #444;
     font-weight: 500;
     display: flex;
     align-items: center;
 }
 
 label i {
     margin-right: 10px;
     color: #07C160;
 }
 
 .input-field {
     width: 100%;
     padding: 16px 20px;
     border: 1px solid #e0e0e0;
     border-radius: 10px;
     font-size: 16px;
     background-color: #f9f9f9;
     caret-color: #07C160;
     transition: all 0.3s;
 }
 
 .input-field:focus {
     border-color: #07C160;
     background-color: #fff;
     box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
     outline: none;
 }
 
 .input-field::placeholder {
     color: #aaa;
 }
 
 .features {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin: 30px 0;
 }
 
 .feature {
     flex: 1 0 calc(50% - 12px);
     background: #f1f8ff;
     padding: 15px;
     border-radius: 10px;
     font-size: 14px;
     min-width: 0;
 }
 
 .feature strong {
     display: block;
     margin-bottom: 5px;
     color: #07C160;
 }
 
 .stats {
     background: #f9f9f9;
     border-radius: 10px;
     padding: 20px;
     margin: 30px 0;
     text-align: center;
 }
 
 .stats h3 {
     margin-bottom: 15px;
     color: #07C160;
 }
 
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
 }
 
 .stat-item {
     background: white;
     padding: 12px;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .stat-value {
     font-size: 18px;
     font-weight: bold;
     color: #07C160;
     margin-bottom: 5px;
 }
 
 .stat-label {
     font-size: 12px;
     color: #666;
 }
 
 .instructions {
     background: #f9f9f9;
     border-radius: 10px;
     padding: 20px;
     margin-top: 30px;
 }
 
 .instructions h3 {
     margin-bottom: 15px;
     color: #333;
     display: flex;
     align-items: center;
 }
 
 .instructions h3 i {
     margin-right: 10px;
     color: #07C160;
 }
 
 .instructions ul {
     padding-left: 20px;
 }
 
 .instructions li {
     margin-bottom: 10px;
     font-size: 14px;
 }
 
 .picker-modal {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: #fff;
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
     box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
     transform: translateY(100%);
     transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     z-index: 1000;
     max-height: 80vh;
 }
 
 .picker-modal.active {
     transform: translateY(0);
 }
 
 .picker-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     border-bottom: 1px solid #f0f0f0;
 }
 
 .picker-title {
     font-size: 18px;
     font-weight: 600;
     color: #333;
 }
 
 .picker-close {
     color: #888;
     font-size: 16px;
     background: none;
     border: none;
     cursor: pointer;
     padding: 8px 16px;
     border-radius: 6px;
     transition: background-color 0.2s;
 }
 
 .picker-close:active {
     background-color: #f0f0f0;
 }
 
 .picker-confirm {
     color: #07C160;
     font-size: 16px;
     font-weight: 500;
     background: none;
     border: none;
     cursor: pointer;
     padding: 8px 16px;
     border-radius: 6px;
     transition: background-color 0.2s;
 }
 
 .picker-confirm:active {
     background-color: rgba(7, 193, 96, 0.1);
 }
 
 .picker-content {
     display: flex;
     height: 300px;
     overflow: hidden;
 }
 
 .picker-column {
     flex: 1;
     overflow-y: auto;
     height: 100%;
     padding: 10px 0;
 }
 
 .picker-item {
     padding: 16px 20px;
     font-size: 16px;
     text-align: center;
     transition: all 0.2s;
     position: relative;
 }
 
 .picker-item.active {
     color: #07C160;
     font-weight: 500;
     background-color: rgba(7, 193, 96, 0.05);
 }
 
 .picker-item:active {
     background-color: #f0f0f0;
 }
 
 .picker-item.active::after {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 4px;
     height: 40%;
     background-color: #07C160;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
 }
 
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s;
     z-index: 999;
 }
 
 .overlay.active {
     opacity: 1;
     visibility: visible;
 }
 
 @media (max-width: 480px) {
     .container {
         padding: 20px 15px;
         border-radius: 12px;
     }
     
     h1 {
         font-size: 22px;
     }
     
     .feature {
         flex: 1 0 100%;
     }
     
     .stats-grid {
         grid-template-columns: 1fr 1fr;
     }
 }
</style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>微信风格省市区选择器</h1>
        </div>

        <p class="description">点击下方输入框体验从底部弹出的省市区选择面板，支持三级联动选择</p>

        <div class="form-group">
            <label for="location"><i class="fas fa-map-marker-alt"></i>选择省市区</label>
            <input type="text" class="input-field" id="location" placeholder="请选择省市区" readonly>
        </div>

        <div class="features">
            <div class="feature">
                <strong>三级联动</strong>
                <span>省、市、区三级联动选择</span>
            </div>
            <div class="feature">
                <strong>底部弹出</strong>
                <span>从底部平滑弹出选择面板</span>
            </div>
            <div class="feature">
                <strong>微信风格</strong>
                <span>类似微信小程序的UI设计</span>
            </div>
            <div class="feature">
                <strong>移动友好</strong>
                <span>专为移动端优化的交互体验</span>
            </div>
        </div>

        <div class="stats">
            <h3>中国行政区划数据</h3>
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-value">34</div>
                    <div class="stat-label">省级行政区</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">333</div>
                    <div class="stat-label">地级行政区</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">2846</div>
                    <div class="stat-label">县级行政区</div>
                </div>
            </div>
        </div>

        <div class="instructions">
            <h3><i class="fas fa-info-circle"></i>使用说明</h3>
            <ul>
                <li>点击输入框弹出省市区选择面板</li>
                <li>从左到右依次选择省、市、区</li>
                <li>点击"确定"按钮确认选择</li>
                <li>点击"取消"或遮罩层关闭面板</li>
            </ul>
        </div>
    </div>

    <div class="overlay" id="overlay"></div>

    <div class="picker-modal" id="pickerModal">
        <div class="picker-header">
            <button class="picker-close" id="closePicker">取消</button>
            <span class="picker-title">选择地区</span>
            <button class="picker-confirm" id="confirmPicker">确定</button>
        </div>
        <div class="picker-content" id="pickerContent">
            <!-- 省份列 -->
            <div class="picker-column" id="provinceColumn">
                <!-- 省份选项将通过JS动态添加 -->
            </div>

            <!-- 城市列 -->
            <div class="picker-column" id="cityColumn">
                <!-- 城市选项将通过JS动态添加 -->
            </div>

            <!-- 区域列 -->
            <div class="picker-column" id="districtColumn">
                <!-- 区域选项将通过JS动态添加 -->
            </div>
        </div>
    </div>

    <script>
         
    // 完整的中国省市区数据
    const locationData = [
        {
            name: "北京市",
            cities: [
                {
                    name: "北京市",
                    districts: ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
                }
            ]
        },
        {
            name: "天津市",
            cities: [
                {
                    name: "天津市",
                    districts: ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "滨海新区", "宁河区", "静海区", "蓟州区"]
                }
            ]
        },
        {
            name: "河北省",
            cities: [
                {
                    name: "石家庄市",
                    districts: ["长安区", "桥西区", "新华区", "井陉矿区", "裕华区", "藁城区", "鹿泉区", "栾城区", "井陉县", "正定县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县", "无极县", "平山县", "元氏县", "赵县", "晋州市", "新乐市"]
                },
                {
                    name: "唐山市",
                    districts: ["路南区", "路北区", "古冶区", "开平区", "丰南区", "丰润区", "曹妃甸区", "滦南县", "乐亭县", "迁西县", "玉田县", "遵化市", "迁安市", "滦州市"]
                },
                {
                    name: "秦皇岛市",
                    districts: ["海港区", "山海关区", "北戴河区", "抚宁区", "青龙满族自治县", "昌黎县", "卢龙县"]
                },
                {
                    name: "邯郸市",
                    districts: ["邯山区", "丛台区", "复兴区", "峰峰矿区", "肥乡区", "永年区", "临漳县", "成安县", "大名县", "涉县", "磁县", "邱县", "鸡泽县", "广平县", "馆陶县", "魏县", "曲周县", "武安市"]
                },
                {
                    name: "邢台市",
                    districts: ["襄都区", "信都区", "任泽区", "南和区", "临城县", "内丘县", "柏乡县", "隆尧县", "宁晋县", "巨鹿县", "新河县", "广宗县", "平乡县", "威县", "清河县", "临西县", "南宫市", "沙河市"]
                },
                {
                    name: "保定市",
                    districts: ["竞秀区", "莲池区", "满城区", "清苑区", "徐水区", "涞水县", "阜平县", "定兴县", "唐县", "高阳县", "容城县", "涞源县", "望都县", "安新县", "易县", "曲阳县", "蠡县", "顺平县", "博野县", "雄县", "涿州市", "定州市", "安国市", "高碑店市"]
                },
                {
                    name: "张家口市",
                    districts: ["桥东区", "桥西区", "宣化区", "下花园区", "万全区", "崇礼区", "张北县", "康保县", "沽源县", "尚义县", "蔚县", "阳原县", "怀安县", "怀来县", "涿鹿县", "赤城县"]
                },
                {
                    name: "承德市",
                    districts: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "兴隆县", "滦平县", "隆化县", "丰宁满族自治县", "宽城满族自治县", "围场满族蒙古族自治县", "平泉市"]
                },
                {
                    name: "沧州市",
                    districts: ["新华区", "运河区", "沧县", "青县", "东光县", "海兴县", "盐山县", "肃宁县", "南皮县", "吴桥县", "献县", "孟村回族自治县", "泊头市", "任丘市", "黄骅市", "河间市"]
                },
                {
                    name: "廊坊市",
                    districts: ["安次区", "广阳区", "固安县", "永清县", "香河县", "大城县", "文安县", "大厂回族自治县", "霸州市", "三河市"]
                },
                {
                    name: "衡水市",
                    districts: ["桃城区", "冀州区", "枣强县", "武邑县", "武强县", "饶阳县", "安平县", "故城县", "景县", "阜城县", "深州市"]
                }
            ]
        },
        {
            name: "山西省",
            cities: [
                {
                    name: "太原市",
                    districts: ["小店区", "迎泽区", "杏花岭区", "尖草坪区", "万柏林区", "晋源区", "清徐县", "阳曲县", "娄烦县", "古交市"]
                },
                {
                    name: "大同市",
                    districts: ["新荣区", "平城区", "云冈区", "云州区", "阳高县", "天镇县", "广灵县", "灵丘县", "浑源县", "左云县"]
                },
                {
                    name: "阳泉市",
                    districts: ["城区", "矿区", "郊区", "平定县", "盂县"]
                },
                {
                    name: "长治市",
                    districts: ["潞州区", "上党区", "屯留区", "潞城区", "襄垣县", "平顺县", "黎城县", "壶关县", "长子县", "武乡县", "沁县", "沁源县"]
                },
                {
                    name: "晋城市",
                    districts: ["城区", "泽州县", "高平县", "阳城县", "陵川县", "沁水县", "朔州市", "朔城区", "平鲁区", "山阴县", "应县", "右玉县", "怀仁市"]
                },
                {
                    name: "晋中市",
                    districts: ["榆次区", "太谷区", "榆社县", "左权县", "和顺县", "昔阳县", "寿阳县", "祁县", "平遥县", "灵石县", "介休市"]
                },
                {
                    name: "运城市",
                    districts: ["盐湖区", "临猗县", "万荣县", "闻喜县", "稷山县", "新绛县", "绛县", "垣曲县", "夏县", "平陆县", "芮城县", "永济市", "河津市"]
                },
                {
                    name: "忻州市",
                    districts: ["忻府区", "定襄县", "五台县", "代县", "繁峙县", "宁武县", "静乐县", "神池县", "五寨县", "岢岚县", "河曲县", "保德县", "偏关县", "原平市"]
                },
                {
                    name: "临汾市",
                    districts: ["尧都区", "曲沃县", "翼城县", "襄汾县", "洪洞县", "古县", "安泽县", "浮山县", "吉县", "乡宁县", "大宁县", "隰县", "永和县", "蒲县", "汾西县", "侯马市", "霍州市"]
                },
                {
                    name: "吕梁市",
                    districts: ["离石区", "文水县", "交城县", "兴县", "临县", "柳林县", "石楼县", "岚县", "方山县", "中阳县", "交口县", "孝义市", "汾阳市"]
                }
            ]
        },
        {
            name: "内蒙古自治区",
            cities: [
                {
                    name: "呼和浩特市",
                    districts: ["新城区", "回民区", "玉泉区", "赛罕区", "土默特左旗", "托克托县", "和林格尔县", "清水河县", "武川县"]
                },
                {
                    name: "包头市",
                    districts: ["东河区", "昆都仑区", "青山区", "石拐区", "白云鄂博矿区", "九原区", "土默特右旗", "固阳县", "达尔罕茂明安联合旗"]
                },
                {
                    name: "乌海市",
                    districts: ["海勃湾区", "海南区", "乌达区"]
                },
                {
                    name: "赤峰市",
                    districts: ["红山区", "元宝区", "松山区", "阿鲁科尔沁旗", "巴林左旗", "巴林右旗", "林西县", "克什克腾旗", "翁牛特旗", "喀喇沁旗", "宁城县", "敖汉旗"]
                },
                {
                    name: "通辽市",
                    districts: ["科尔沁区", "科尔沁左翼中旗", "科尔沁左翼后旗", "开鲁县", "库伦旗", "奈曼旗", "扎鲁特旗", "霍林郭勒市"]
                },
                {
                    name: "鄂尔多斯市",
                    districts: ["东胜区", "康巴什区", "达拉特旗", "准格尔旗", "鄂托克前旗", "鄂托克旗", "杭锦旗", "乌审旗", "伊金霍洛旗"]
                },
                {
                    name: "呼伦贝尔市",
                    districts: ["海拉尔区", &qu.........完整代码请登录后点击上方下载按钮下载查看