js (vue)实现二级联动

最新推荐文章于 2024-05-31 10:47:24 发布

海绵老呆

最新推荐文章于 2024-05-31 10:47:24 发布

阅读量1.5k

点赞数 2

文章标签： js vue

本文链接：https://blog.csdn.net/m0_37343874/article/details/106216003

版权

一、一般用法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8" />
      <title></title>
  </head>

<body>
   省/市:
   <select id="provice"></select>
   市/区:
    <select id="city"></select>
<script type="text/javascript">
   //定义省/直辖市数组
   let arr_province = ["请选择省/直辖市", "北京市", "上海市", "广东省"];
   //定义市/区二维数组
   let arr_city = [
         ["请选择市/区"],
         ["东城区", "西城区", "朝阳区", "宣武区", "昌平区", "大兴区", "丰台区", "海淀区"],
         ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'],
         ['广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市']
     ];
   let province = document.getElementById("provice");
   let city = document.getElementById("city");
   //初始化菜单
   window.onload = function () {
     province.length = arr_province.length;
     for(let i =0; i < arr_province.length; i++){
       province.options[i].text = arr_province[i]
     }
     city.length = 1;
     city.options[0].text = arr_city[0][0]
   };
   //二级连动
   province.onchange = function () {
     let index = province.selectedIndex;
     city.length = arr_city[index].length;
     for(let i = 0;i<city.length; i++){
       city.options[i].text = arr_city[index][i]
     }
   }
      </script>
</body>
</html>

备注

onchange不要写成onChange

二、二级联动在vue中的使用（固定数据）

在这里插入图片描述

三、二级联动在vue中获取后台数据的用法

html

<span>案例类别</span>
<select title="first" id="first" class="select" @click="changeLabel($event)">
    <option v-for="(item, index) in firstClass">{{item.name}}</option>
</select>
<select title="second" class="select">
    <option value="" v-for="title in secondClass">{{title.name}}</option>
</select>

js

data(){
  return {
	firstClass:[],
	secondClass:[]
  }
},
mounted () {
   this.caseClass()
},
methods:{
      //一级
      caseClass(){
        axios.get(`${baseUrl}case/category/getCategory/1`).then(data => {
          this.firstClass = data.data.data
        })
      },
      //二级连动
      changeLabel(event) {
        let first = document.getElementById("first");
        let index = first.selectedIndex;
        let firstId = this.firstClass[index].id
        axios.get(`${baseUrl}case/category/${firstId}/1`).then(data => {
          this.secondClass = data.data.data
        })
      }
}

在这里插入图片描述

海绵老呆

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
js (vue)实现二级联动

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title></title> </head><body> 省/市: <select id="provice"></select> 市/区: <select id="city"></..
复制链接

扫一扫