制作JS省市区三级联动遇到市区选项是空白的问题

简介: 制作JS省市区三级联动遇到市区选项是空白的问题
<span>省</span>:
  <select class="sheng">
    <option>请选择</option>
  </select>
  <span>市:</span>
  <select class="shi">
    <option>请选择</option>
  </select>
  <span>区/县:</span>
  <select class="qu">
    <option>请选择</option>
  </select>
  <script src="js/link.js"></script>
let shenglist = ['河南省', '山东省', '陕西省', '内蒙古自治区'];
// 设置市的数据
let shilist = [
  ['郑州市', '新乡市', '洛阳市', '开封市'],
  ['济南市', '青岛市', '泰安市', '烟台市'],
  ['西安市', '汉中市', '咸阳市', '宝鸡市'],
  ['呼和浩特市', '包头市', '乌海市', '赤峰市'],
];
// 设置区的数据
let qulist = [
  [
    ['金水区', '管城回族区', '二七区', '荥阳市'],
    ['卫滨区', '红旗区', '凤泉区', '平原新区'],
    ['偃师区', '孟津区', '洛龙区', '涧西区'],
  ],
  [
    ['章丘区', '济阳区', '莱芜区', '历下区'],
    ['即墨区', '黄岛区', '城阳区', '崂山区'],
    ['岱岳区', '泰山区', '新泰市', '肥城市'],
  ],
  [
    ['长安区', '临潼区', '雁塔区', '灞桥区'],
    ['南郑区', '汉台区', '西乡县', '城固县'],
    ['渭城区', '秦都区', '杨陵区', '兴平市'],
  ],
  [
    ['赛罕区', '玉泉区', '武川县', '新城区'],
    ['昆都仑区', '青山区', '九原区', '东河区'],
    ['海勃湾区', '乌达区', '海南区'],
  ]
];

在JS中添加三组数据,分别表示省市区的名字,但在点击每个市最后一个时,区的数据不会出来

打开控制台会出现报错的情况

解决这种情况只需要在设置区的数据中,新增一组。

// 设置省的数据
let shenglist = ['河南省', '山东省', '陕西省', '内蒙古自治区'];
// 设置市的数据
let shilist = [
  ['郑州市', '新乡市', '洛阳市', '开封市'],
  ['济南市', '青岛市', '泰安市', '烟台市'],
  ['西安市', '汉中市', '咸阳市', '宝鸡市'],
  ['呼和浩特市', '包头市', '乌海市', '赤峰市'],
];
// 设置区的数据
let qulist = [
  [
    ['金水区', '管城回族区', '二七区', '荥阳市'],
    ['卫滨区', '红旗区', '凤泉区', '平原新区'],
    ['偃师区', '孟津区', '洛龙区', '涧西区'],
    ['兰考县', '杞县', '尉氏县', '鼓楼区']
  ],
  [
    ['章丘区', '济阳区', '莱芜区', '历下区'],
    ['即墨区', '黄岛区', '城阳区', '崂山区'],
    ['岱岳区', '泰山区', '新泰市', '肥城市'],
    ['蓬莱区', '海阳市', '龙口市', '福山区']
  ],
  [
    ['长安区', '临潼区', '雁塔区', '灞桥区'],
    ['南郑区', '汉台区', '西乡县', '城固县'],
    ['渭城区', '秦都区', '杨陵区', '兴平市'],
    ['渭滨区', '金台区', '陈仓区', '凤翔区']
  ],
  [
    ['赛罕区', '玉泉区', '武川县', '新城区'],
    ['昆都仑区', '青山区', '九原区', '东河区'],
    ['海勃湾区', '乌达区', '海南区'],
    ['红山区', '松山区', '元宝山区', '宁城县']
  ]
];
相关文章
|
3月前
|
JSON JavaScript 数据格式
如何用JS实现三级联动功能
如何用JS实现三级联动功能
29 0
|
3月前
|
JavaScript 前端开发
原生js做三级联动
原生js做三级联动
15 0
|
6月前
|
前端开发 JavaScript
前端基础 - JavaScript之省市联动简单案例
前端基础 - JavaScript之省市联动简单案例
37 0
|
3月前
|
JavaScript 前端开发
「 javaScript实现省市区三级联动」
「 javaScript实现省市区三级联动」
|
3月前
|
JavaScript 前端开发
js 实现三级联动
js 实现三级联动
27 0
|
3月前
|
JavaScript 数据可视化 前端开发
钉钉宜搭通过js触发子表单数据联动
钉钉宜搭通过js触发子表单数据联动
|
4月前
|
JavaScript
JS实现三级联动
JS实现三级联动
26 0
|
4月前
|
JavaScript
原生js实现省市区三级联动
原生js实现省市区三级联动
21 0
|
5月前
|
JavaScript
JS实现三级联动
JS实现三级联动
18 0
|
6月前
|
JavaScript 前端开发
Javascript知识【案例:重写省市联动&案例:列表左右选择】
Javascript知识【案例:重写省市联动&案例:列表左右选择】