本站消息

站长简介/公众号


关注本站官方公众号:程序员总部,领取三大福利! 福利一:python和前端辅导 福利二:进程序员交流微信群,专属于程序员的圈子 福利三:领取全套零基础视频教程(python,java,前端,php)

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-10(102)

2021-11(94)

2021-12(160)

2022-01(36)

2022-02(14)

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

发布于2021-01-31 14:03     阅读(1207)     评论(0)     点赞(16)     收藏(1)



前言

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


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




所属网站分类: 技术文章 > 博客

作者:前端大师

链接:http://www.qianduanheidong.com/blog/article/73/0f7ea332fa397d665ab8/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

16 0
收藏该文
已收藏

评论内容:(最多支持255个字符)