使用原生js实现一个简单的三级联动

最新推荐文章于 2024-06-27 20:13:46 发布

JQ...

最新推荐文章于 2024-06-27 20:13:46 发布

阅读量256

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42201272/article/details/104939977

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <select name="" id="" class="province">
      <option>--请选择城市--</option>
    </select>
    <select name="" id="" class="city">
      <option>--请选择城市--</option>
    </select>
    <select name="" id="" class="county">
      <option>--请选择城市--</option>
    </select>
    <script>
      var data = [
        {
          value: '吉林省1',
          children: [
            {
              value: '通话市1',
              children: [
                {
                  value: 'aa1'
                }
              ]
            },
            {
              value: '白山市1'
            }
          ]
        },
        {
          value: '吉林省2',
          children: [
            {
              value: '通话市2'
            },
            {
              value: '白山市2',
              children: [
                {
                  value: 'bb2'
                }
              ]
            }
          ]
        },
        {
          value: '吉林省3',
          children: [
            {
              value: '通话市3'
            },
            {
              value: '白山市3',
              children: [
                {
                  value: 'cc2'
                }
              ]
            }
          ]
        }
      ]
      var province = document.querySelector('.province')
      var city = document.querySelector('.city')
      var county = document.querySelector('.county')
      // 将省级内容渲染到第一个下拉框中
      data.forEach((val, index) => {
        var option = document.createElement('option')
        option.value = index
        option.innerHTML = val.value
        province.appendChild(option)
      })

      province.onchange = function() {
        // 初始化市 县
        city.innerHTML = '<option>--请选择城市--</option>'
        county.innerHTML = '<option>--请选择城市--</option>'
        // 渲染市的下拉框
        data[this.value] ? data[this.value] : []
        data[this.value].children.forEach((val, index) => {
          var option = document.createElement('option')
          option.value = index
          option.innerHTML = val.value
          city.appendChild(option)
        })
        var that = this
        // 渲染县级下拉框
        city.onchange = function() {
          //  初始化县级的数据
          data[that.value].children[this.value].children =
            data[that.value].children[this.value].children || []
          // 渲染县级数据
          data[that.value].children[this.value].children.forEach(
            (val, index) => {
              var option = document.createElement('option')
              option.value = index
              option.innerHTML = val.value
              county.appendChild(option)
            }
          )
        }
      }
    </script>
  </body>
</html>