JS控制二级联动

最新推荐文章于 2022-09-28 19:29:07 发布

赵至柔

最新推荐文章于 2022-09-28 19:29:07 发布

阅读量910

点赞数

本文链接：https://blog.csdn.net/qq_39516859/article/details/79491397

版权

本文介绍了如何使用JavaScript实现二级联动效果，特别是在注册页面中，根据省份选择动态加载对应城市的例子。通过分析需求，理解数组操作，设定onchange事件，比较省份值并动态创建option元素来填充城市列表。代码实现和效果展示适合初学者学习。

摘要由CSDN通过智能技术生成

1、需求

在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份，将这个省份下的城市列出。

2、技术分析

数组

语法:

new Array();//长度为0
new Array(size);//指定长度的
new Array(e1,e2..);//指定元素
非官方
    var arr4=["aa","bb"];

常用属性:
```
length
```

注意:

数组是可变的
数组可以存放任意值

常用方法:(了解)

存放值:对内容的操作
    pop():弹 最后一个
    push():插入 到最后
    shift():删除第一个
    unshift():插入到首位
打印数组:
    join(分隔符):将数组里的元素按照指定的分隔符打印
拼接数组:
    concat():连接两个或更多的数组，并返回结果。
对结构的操作:
    sort();排序
    reverse();反转

3、步骤分析

步骤一：确定事件：onchange.
步骤二：获得改变的省份值 .
步骤三：比较省份的值与数组中定义的值是否相等，如果相等获得这个省份对应的所有的市的数组.
步骤四：创建option元素，将数组中的值添加到option元素中。
步骤五：将option添加到第二个下拉列表中.

4、代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <

最低0.47元/天解锁文章

赵至柔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS控制二级联动

1、需求在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份，将这个省份下的城市列出。2、技术分析数组语法:new Array();//长度为0new Array(size);//指定长度的new Array(e1,e2..);//指定元素非官方 var arr4=["aa","bb"];常用属性:length注意:...
复制链接

扫一扫