JavaScript级联链表

爱笑的陈sir

已于 2022-07-11 22:01:21 修改

阅读量1.7k

点赞数 24

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-05-06 17:54:47 首次发布

本文链接：https://blog.csdn.net/qq_62259825/article/details/124613029

版权

JavaScript 专栏收录该内容

13 篇文章 6 订阅

订阅专栏

一日不见，如隔三秋
我还是你们熟悉的——爱笑的陈sir
他们习惯叫我文静（hhhhh）
不知不觉，五一劳动节来了，
转眼间劳动节嗖的一下就过去了
本来打算五一总结一下这几天的学习成果
不巧的是有事耽搁了
时间给勤勉的人留下智慧的力量，给懒惰的人留下空虚和悔恨。
勤学的人，总是感到时间过得太快；懒惰的人，却总是埋怨时间跑得太慢

级联列表：

1. 什么是级联列表？

2. 级联列表有什么用？

3. 怎么实现相应的操作？

4. 两种方法实现对应省市的下拉操作

一、什么是级联？

1.级联还指用来设计一对多关系。举个例子：一个表存放学生的信息:表A（姓名，性别，年龄），姓名为主键。还有一张表存放学生的班级信息:表B（姓名，班级）。他们通过姓名来级联。级联的操作有级联更新，级联删除。
二、级联相应的操作

在启用一个级联更新选项后，就可在存在相匹配的外键值的前提下更改一个主键值。系统会相应地更新所有匹配的外键值。如果在表A中将姓名为王五的记录改为李四，那么表B中的姓名为王五的所有记录也会随着改为李四。级联删除与更新相类似。如果在表A中将姓名为王五的记录删除，那么表B中的姓名为王五的所有记录也将删除。

3.下拉菜单

如图：

<select id ="">

</select>

下拉选项标签

方法一：

在option标签中填充相应的省份（如河北，河南，山东等）

如图：

 <option>河北</option>
 <option>河南</option>
 <option>山东</option> -

在option标签中填充相应的市区（如秦皇岛，唐山，廊坊等）

如图：

 </select>
    <select id="sk2">
    <!-- <option>秦皇岛</option>
    <option>唐山</option>
    <option>廊坊</option>  -->
    </select>
    <script>

效果展示：

在这里插入图片描述

方法二：

1.定义一个放置省份的数组

   var provinces=["河北","河南","山东","山西","北京"]

2.将省份数据拼接成option标签,放入第一个select标签中

   var str=""
     for(var n=0;n<provinces.length;n++){
         str=str+"<option>"+provinces[n]+"</option>"
     } 
       //console.log(str)

3.将拼接好的str字符串,放入第一个select标签中

 var sl1=document.getElementById("sl1")
     sl1.innerHTML=str

4.定义一个放置市的数组
二维数组：数组内部中的元素还是数组

   var citys=
   [["秦皇岛","唐山","廊坊"],
   ["开封","洛阳"],["青岛","淄博"]
  ,["太原","大同"],["海淀","朝阳"]]
     //console.log(citys[3][0])

5.由于默认显示的是河北所以第二个下拉框中需要默认显示河北对应的市

 city[0]
 var str1=""
 for(var n=0;n<citys[0].length;n++){
 str1=str1+"<option>"+citys[0][n]+"</option>"
     }

6.将拼接好的str1放入到第二个select标签中

var sl2=document.getElementById("sk2")
    sk2.innerHTML=str1

7.当左侧的select内容发生对应的切换时,右侧select内容随之变化
//js中事件编程：找到对应的事件源绑定对应的事件进行相应的操作
//事件源：sl1
//事件：改变事件 onchange
//事件处理函数：function(){}

  sl1.onchange=function(){
      //  console.log(1)
     //根据切换到的内容，右侧的select标签发生随之变化
     //获取到 切换到了谁？  找到当前变化到元素的索引值
     var index=sl1.selectedIndex//当前选中标签的索引值
     //console.log(citys[index])
     //遍历对应的数组 citys[index]
     var str1=""
     for(var n=0;n<citys[index].length;n++){
         str1=str1+"<option>"+citys[index][n]+"</option>"
     }
     sk2.innerHTML=str1
     }
    </script>
</body>
</html>

完整对应的相关省市操作如图：
有图吗？
？？？（三连疑惑）
有吗？
我怎么知道有没有？（母鸡啊）
要什么图？直接上视频展示它不香吗？
不愧是你

~~小破站：JavaScript级联列表视频效果展示~~

小项目完整源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>级联列表</title>
</head>
<body>
  <!-- 下拉菜单 -->
    <select id="sl1">
    <!-- <option>河北</option>
    <option>河南</option>
    <option>山东</option> -->

    </select>
    <select id="sk2">
    <!-- <option>秦皇岛</option>
    <option>唐山</option>
    <option>廊坊</option>  -->
    </select>
    <script>
     //1.定义一个放置省份的数组
     var provinces=["河北","河南","山东","山西","北京"]  
     //2.将省份数据拼接成option标签,放入第一个select标签中
     var str=""
     for(var n=0;n<provinces.length;n++){
         str=str+"<option>"+provinces[n]+"</option>"
     } 
     //console.log(str)
     //3.将拼接好的str字符串,放入第一个select标签中
     var sl1=document.getElementById("sl1")
     sl1.innerHTML=str
     //4.定义一个放置 市的数组
     //二维数组：数组内部中的元素 还是数组
     var citys=[["秦皇岛","唐山","廊坊"],["开封","洛阳"],["青岛","淄博"],["太原","大同"],["海淀","朝阳"]]
     //console.log(citys[3][0])
     //5.由于默认显示的是河北   所以第二个下拉框中  需要默认显示河北对应的市
     //city[0]
     var str1=""
     for(var n=0;n<citys[0].length;n++){
         str1=str1+"<option>"+citys[0][n]+"</option>"
     }
     //6.将拼接好的str1放入到第二个select标签中
     var sl2=document.getElementById("sk2")
     sk2.innerHTML=str1
     //7.当左侧的select内容发生对应的切换时,右侧select内容随之变化
     //js中事件编程：找到对应的事件源    绑定对应的事件  进行相应的操作
     //事件源：sl1
     //事件：改变事件  onchange
     //事件处理函数：function(){}
     sl1.onchange=function(){
      //  console.log(1)
     //根据切换到的内容，右侧的select标签发生随之变化
     //获取到 切换到了谁？  找到当前变化到元素的索引值
     var index=sl1.selectedIndex//当前选中标签的索引值
     //console.log(citys[index])
     //遍历对应的数组 citys[index]
     var str1=""
     for(var n=0;n<citys[index].length;n++){
         str1=str1+"<option>"+citys[index][n]+"</option>"
     }
     sk2.innerHTML=str1
     }
    </script>
</body>
</html>