制作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 = [
  [
    ['金水区', '管城回族区', '二七区', '荥阳市'],
    ['卫滨区', '红旗区', '凤泉区', '平原新区'],
    ['偃师区', '孟津区', '洛龙区', '涧西区'],
    ['兰考县', '杞县', '尉氏县', '鼓楼区']
  ],
  [
    ['章丘区', '济阳区', '莱芜区', '历下区'],
    ['即墨区', '黄岛区', '城阳区', '崂山区'],
    ['岱岳区', '泰山区', '新泰市', '肥城市'],
    ['蓬莱区', '海阳市', '龙口市', '福山区']
  ],
  [
    ['长安区', '临潼区', '雁塔区', '灞桥区'],
    ['南郑区', '汉台区', '西乡县', '城固县'],
    ['渭城区', '秦都区', '杨陵区', '兴平市'],
    ['渭滨区', '金台区', '陈仓区', '凤翔区']
  ],
  [
    ['赛罕区', '玉泉区', '武川县', '新城区'],
    ['昆都仑区', '青山区', '九原区', '东河区'],
    ['海勃湾区', '乌达区', '海南区'],
    ['红山区', '松山区', '元宝山区', '宁城县']
  ]
];
相关文章
|
7月前
|
JSON JavaScript 数据格式
如何用JS实现三级联动功能
如何用JS实现三级联动功能
66 0
|
7月前
|
JavaScript 前端开发
原生js做三级联动
原生js做三级联动
36 0
|
2月前
|
JavaScript
js实现省市区的三级联动
js实现省市区的三级联动
48 7
|
4月前
|
JavaScript
js省市区三级联动
js省市区三级联动
36 1
|
4月前
|
JSON JavaScript 前端开发
js省市区三级联动
js省市区三级联动
52 1
|
4月前
|
JavaScript
js实现省市区三级联动
js实现省市区三级联动
50 0
|
7月前
|
JavaScript 前端开发
「 javaScript实现省市区三级联动」
「 javaScript实现省市区三级联动」
|
5月前
|
NoSQL JavaScript 前端开发
JavaScript与数据库MongoDB的联动
JavaScript和MongoDB结合,构建Web应用的关键技术。MongoDB,作为NoSQL数据库,以其灵活性和高性能深受开发者喜爱。本文探讨两者的基本概念,如JavaScript在前端交互和后端数据处理的作用,MongoDB的文档存储和查询特性。通过Node.js和mongoose库,展示了连接数据库、定义数据模型及增删改查操作的代码示例。强调了性能优化(如索引、批量操作)和安全措施(如权限控制、数据加密)的重要性。最后,提供了一个简单的CRUD应用示例,涵盖Express和前端API调用。
58 0
|
6月前
|
存储 JavaScript 前端开发
JS三级联动
JS三级联动
|
7月前
|
JavaScript 数据可视化 前端开发
钉钉宜搭通过js触发子表单数据联动
钉钉宜搭通过js触发子表单数据联动