• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

互联网 diligentman 1个月前 (01-31) 15次浏览

文章目录

  • 前言
  • 一、使用Js制作一个简单的省市联动
  • 二、使用步骤
    • 首先在HTML中编写我们的一个简单下拉列表
    • 1.开始在Js中编写我们即将要在下拉列表中显示的内容:
    • 2.这里就需要将我们要使用的数组进一步的放在我们的二维数组中
    • 3.使用DOM获取元素的方法
    • 4.使用onchange 事件
    • 6.效果如图
  • 总结

前言

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


一、使用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>

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

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

代码如下(示例):

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

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

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

代码如下(示例):

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

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

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++;
    }

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

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++;
      }
  }

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

6.效果如图

代码如下(示例):


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

总结

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


程序员灯塔
转载请注明原文链接:使用Js制作一个简单的省市联动
喜欢 (0)