使用Js制作一个简单的省市联动

2022-08-24 10:17:32

前言

随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。


一、使用Js制作一个简单的省市联动

如果想要简单的实现下拉列表的联动。我们要明确我们要用到的元素
1): 下拉列表标签
2):document.getElementById()DOM获取元素的方法
3);onchange 事件

二、使用步骤

首先在HTML中编写我们的一个简单下拉列表

小提示:大家定义ID名字时候,一定要定义一个有意义的。不要和我一样

<select id="userHu" style="width: 150px"><option value="">-请选择省-</option></select>&nbsp;&emsp;
select id="userHu2" style="width: 150px"><option value="0">-请选择市-</option></select>

在这里插入图片描述

1.开始在Js中编写我们即将要在下拉列表中显示的内容:

代码如下(示例):

let ShengArray=["北京","山西","河北","山东","河南"];
let bjArray=["朝阳区","顺义区","昌平区","海定区"];
let sxArray=["大同市","太原市","长治市","吕梁市"];
let hbArray=["张家口市","石家庄市","邯郸市","唐山市"];
let sdArray=["德州市","济南市","济宁市","青岛市"];
let  hnArray=["驻马店市","开封市","洛阳市","安阳市"];

在这里插入图片描述

2.这里就需要将我们要使用的数组进一步的放在我们的二维数组中

代码如下(示例):

let  shiArray=[bjArray,sxArray,hbArray,sdArray,hnArray];

在这里插入图片描述

3.使用DOM获取元素的方法

代码如下(示例):

let userHu= document.getElementById("userHu");
    userHu.innerHTML="<option value=''>--请选择省--</option>";
    let p=0;for(let k of ShengArray){
        userHu.innerHTML+="<option value="+p+">"+k+"</option>";
        p++;}

在这里插入图片描述

4.使用onchange 事件

代码如下(示例):

userHu.onchange=function(){
   let val=this.value;if(val==""){return;}
     let userHu2=document.getElementById("userHu2");
     userHu2.innerHTML="<option value=''>-请选择市--     </option>";
     let shiArr=shiArray[val];
     let e=0;for(let n of shiArr){
   userHu2.innerHTML+="<option value="+e+">"+n+"</option> ";
       e++;}}

在这里插入图片描述

6.效果如图

代码如下(示例):


在这里插入图片描述
在这里插入图片描述

总结

提示:按照这样的步骤,后面的县、街道都可以实现。不过后期可以连接数据库的时候。就不用手动输入数组了。

  • 作者:黑头!
  • 原文链接:https://blog.csdn.net/m0_54255140/article/details/113409916
    更新时间:2022-08-24 10:17:32