原生js实现下拉框三级联动

最新推荐文章于 2024-04-28 13:37:45 发布

叶岚羲

最新推荐文章于 2024-04-28 13:37:45 发布

阅读量1k

点赞数 1

文章标签： css3 css javascript

本文链接：https://blog.csdn.net/qq_44845659/article/details/120973873

版权

<!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>Document</title>
</head>
<style>
    .option:after{
      content: "";
      width: 1px;
      height: 25px;
    
    
      background-color: #ccc;
    /*通过定位将图标放在合适的位置*/
    position: absolute;
      right: 20px;   
      top: 50%;
      transform: translateY(-50%);
    /*给自定义的图标实现点击下来功能*/
    pointer-events: none;
    }
    .option{
  /*用div的样式代替select的样式*/
    
   width: 180px;   
    height: 30px;
    /*border-radius: 5px;*/
  /*盒子阴影修饰作用,自己随意*/
 /* box-shadow: 0 0 5px #ccc;*/
    border: 1px solid #cccccc;
    position: relative;
  }
  .option select{
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  /*将select的宽高等于div的宽高*/
  width: 100%;
    height: 30px;
    line-height: 30px;
  /*隐藏select的下拉图标*/
  /* appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; */
  /*通过padding-left的值让文字居中*/
  padding-left: 20px;
  padding-right:20px ;  
  }    
  .flex{
      display: flex;
      justify-content: start;
      align-items: center;
  }  
  .margin-left{
      margin-left: 10px;
  }
</style>
<body>
        <form action="" name="theform">
            <div class="flex">
                <div class="option margin-left">
                    <select name="province" onchange="getCity()" >  
                        <option value = "0">请选择所在的省份</option>
                        <option value="1">浙江省</option>
                        <option value="2">山东省</option>
                        <option value="3">广东省</option> 
                        <option value="4">甘肃省</option> 
                    </select>
                </div> 
                <div class="option margin-left">   
                    <select id="city" onchange="getQu()">
                        <option value = "0">请选择所在的城市</option>
                    </select>
                </div>
                <div class="option margin-left">
                    <select name = "qu">
                        <option value = "0">请选择所在的县区</option>
                    </select>
                </div>
            </div>
            
        </form>
        
    <script>
    
//按照省份的下拉列表的顺序定义二维数组  将城市列表对应到省份下
var city=[
        ["杭州市","温州市","宁波市","绍兴市"],//浙江省
        ["济南市","青岛市","济宁市","潍坊市"],//山东省
        ["广州市","潮阳","澄海","潮州"],//广东省
        ["兰州市","白银","敦煌","定西"]//甘肃省
    ];

    //县区数组
    var qu=[
        [
                ["杭州一区","杭州二区"],
                ["温州一区","温州二区"],
                ["宁波一区","宁波二区"],
                ["绍兴一区","绍兴二区"]
        ],

        [
                ["济南一区","济南二区"],
                ["青岛一区","青岛二区"],
                ["济宁一区","济宁二区"],
                ["潍坊一区","潍坊二区"],
        ],

        [
                ["广州一区","广州二区"],
                ["潮阳一区","潮阳二区"],
                ["澄海一区","澄海二区"],
                ["潮州一区","潮州二区"],
        ],

        [
                ["兰州一区","兰州二区"],
                ["白银一区","白银二区"],
                ["敦煌一区","敦煌二区"],
                ["定西一区","定西二区"],
        ]

    ];
    var getProvince = document.forms['theform'].province;
    var City = document.forms[0].city;
    var Qu = document.forms[0].qu;
    function getCity(){
        // 初始化
        Qu.length = 1;
        City.length = 1;
        // 获得 省份选择的项（索引值，0开始）
        var getSelectIndex = getProvince.selectedIndex;
        // 匹配选择省下面的 市区
        var proCity = city[getSelectIndex-1]; // 
        console.log( proCity)
        for( var i=0; i<proCity.length; i++){
            City[i+1] = new Option(proCity[i],getSelectIndex)
        }
    }

    function getQu(){
        var getSelectIndex = getProvince.selectedIndex;  // 省
        var getCitySelectedIndex = City.selectedIndex; // 市
        console.log( getCitySelectedIndex )
        var cityQu = qu[getSelectIndex - 1][ getCitySelectedIndex - 1];
        console.log( cityQu )

        for( var i=0; i<cityQu.length; i++){
            Qu[i+1] = new Option(cityQu[0],getCitySelectedIndex)
        }
    }
</script>

叶岚羲

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js实现下拉框三级联动

原生js实现下拉框三级联动<!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"> &l
复制链接

扫一扫