省市区三级联动实例（select居中显示）

最新推荐文章于 2024-08-16 09:48:11 发布

Joyce的前端日常

最新推荐文章于 2024-08-16 09:48:11 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/joyce_lcy/article/details/77897418

版权

本文介绍如何实现省市区三级联动，并解决原生select无法居中显示的问题。采用distpicker jQuery插件，结合span标签和定位技术，使select在页面中居中。同时，提供jsx语法的代码实现细节。

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

1. 需求

页面初始化时如图。与用户交互时实现省市区三级联动，并居中显示。
这里写图片描述

2. 分析

(1)select居中显示

问题：原生的select无法居中显示。
解决方案：用span标签显示初始值及选择的内容，select标签设置成和span同样的大小通过定位的方式覆盖在其上方，并且设置opacity: 0，不可见。
demo如下：

<!DOCTYPE html>  
<html>  
<head>  
<title></title>  
<style>  
.select-container {  
    text-align: center;  
    border:solid 1px; 
    position: relative; 
}  
.select-container select {  
    position: absolute;  
    left: 0px;  
    top: 0px;  
    width: 100%;  
    height: 2em;  
    opacity: 0;  
}  

</style>  
</head>  
<body>  
    <div class="select-container">  
        <span>省份</span>  
        <select>  
            <option value="1">四川</option>  
            <option value="2">湖南</option>  
            <option value=