JS零基础入门——06（级联列表）

m0_65410668

已于 2022-04-29 09:06:37 修改

阅读量345

点赞数

文章标签： javascript 开发语言前端

于 2022-04-22 13:08:10 首次发布

本文链接：https://blog.csdn.net/m0_65410668/article/details/124337597

版权

案例1：利用下拉菜单，敲出省，市菜单

<!DOCTYPE html>
<html>
<head>
	<title>级联列表</title>
</head>
<body>
  <!-- 下拉菜单 -->
  <select>
  	<option value="">河北</option>
  	<option value="">河南</option>
  	<option value="">四川</option>
  	<option value="">海南</option>
  </select>
  <select> 
  <option value="">邯郸</option>
  <option value="">秦皇岛</option>
  <option value="">石家庄</option>
  <option value="">邢台</option>
</select>
</body>
</html>

案例2：利用JS，定义省份菜单

<!DOCTYPE html>
<html>
<head>
	<title>级联列表</title>
</head>
<body>
  <!-- 下拉菜单 -->
  <select id="sl1">
 <!DOCTYPE html>
<html>
<head>
	<title>级联列表</title>
</head>
<body>
  <!-- 下拉菜单 -->
  <select id="sl1">
  	<!-- <option value="">河北</option>
  	<option value="">河南</option>
  	<option value="">四川</option>
  	<option value="">海南</option> -->
  </select> 
<script>
	var provinces=["河北","河南","四川","海南"]
	var str=""
	for(var n=0;n<provinces.length;n++){
		str=str+"<option>"+provinces[n]+"</option>"
	}
	var sl1=document.getElementById("sl1")
	sl1.innerHTML=str                          // 定义省份
</script>
</body>

案例3：利用，JS定义市菜单

<!DOCTYPE html>
<html>
<head>
	<title>级联列表</title>
</head>
<body>
  <!-- 下拉菜单 -->
  <select id="sl1">

  </select>
  <select id="sl2"> 

</select>
<script>
	var provinces=["河北","河南","四川","海南"]
	var str=""
	for(var n=0;n<provinces.length;n++){
		str=str+"<option>"+provinces[n]+"</option>"
	}
	var sl1=document.getElementById("sl1")
	sl1.innerHTML=str                          // 定义省份

   var citys=[["石家庄","保定","邯郸","秦皇岛"],["郑州","洛阳","商丘",],["成都","眉山"], 
   ["三亚","海口"]]
   var str1=""
   for(var n=0;n<citys[0].length;n++){  （注：citys[0]代表河北，因为第一个默认显示河北）
   	str1=str1+"<option>"+citys[0][n]+"</option>"
   }
   var sl2=document.getElementById("sl2")       //定义市
   sl2.innerHTML=str1
</script>
</body>
</html>

案例4：利用级联列表，将省份和市连接

js中事件编程：找到对应的事件源绑定对应事件进行对应的操作
事件源：sl1
事件：改变事件 onchange
事件处理函数：function(){}

<!DOCTYPE html>
<html>
<head>
	<title>级联列表</title>
</head>
<body>
  <!-- 下拉菜单 -->
  <select id="sl1">
 
  </select>
  <select id="sl2"> 
  
</select>
<script>
	var provinces=["河北","河南","四川","海南"]
	var str=""
	for(var n=0;n<provinces.length;n++){
		str=str+"<option>"+provinces[n]+"</option>"
	}
	var sl1=document.getElementById("sl1")
	sl1.innerHTML=str                          // 定义省份


   var citys=[["石家庄","保定","邯郸","秦皇岛"],["郑州","洛阳","商丘",],["成都","眉山"], 
   ["三亚","海口"]]
   var str1=""
   for(var n=0;n<citys[0].length;n++){
   	str1=str1+"<option>"+citys[0][n]+"</option>"
   }
   var sl2=document.getElementById("sl2")
   sl2.innerHTML=str1                          //定义市

    sl1.onchange=function(){
   	var index=sl1.selectedIndex           //找到城市索引值
   	/*console.log(citys[index])*/
   var str1=""
   for(var n=0;n<citys[index].length;n++){
     str1=str1+"<option>"+citys[index][n]+"</option>"
   }
    sl2.innerHTML=str1             //遍历对应的数组 citys[index],使其级联
   }
</script>
</body>
</html>