省市区三级联动怎么写

做页面开发或客户端程序开发，都会碰到几个下拉菜单联动的情况，比如常见的省，市，区三级联动。
这种下拉菜单该怎样联动？下面一起来看下，以页面开发为例子。

操作方法

  • 01

    先看下我们的HTML代码，很简单，就是三个空的select下拉框控件。

  • 02

    然后，我们用JS定义三个数组，分别是省数据，市数据，和区数据。代码如图，用到Jquery来操作dom对象，所以需要引入Jquery脚本。

  • 03

    这个数据可以是后台从数据库读出来的数据，也可以是在JS里直接写的数据。但无论是哪种形式，三个数组的数据都是有关联的。 arr_c，市数组，里面每一项内容都有一个属性‘p_id’，表示这个市是属于哪个省的，即p_id对应的是省数组里的id。 同样arr_a，区数组，里面的c_id是对应市数组里的id，表示这个区是属于哪个市的。

  • 04

    接着添加一个方法general_select_p，该方法循环arr_p数组（省数据），为第一个下拉框添加选项。

  • 05

    然后添加方法general_select_c，该方法和general_select_p类似，循环为第二个下拉框添加选项，主要的区别就是只添加某个省的市数据，添加哪个省的市数据，取决于第一个下拉框选的是哪个省，就是通过参数传过来的省id。代码如图。

  • 06

    最后添加的方法是general_select_a，和general_select_c方法一样，生成区下拉框，用哪个市的区取决于第二个下拉框选的数据。代码如图

  • 07

    接着添加JS代码，在页面加载完成后，我们用JS代码为第一个下拉框，添加数据，即把省数据加到第一个下拉框里，做下拉框的选项，主要是调用general_select_p方法，脚本代码如图

  • 08

    然后为第一个下拉框添加change事件，就是当第一个下拉框选择不同的省时，需要用该省下的市数据填充到第二个下拉框里。 同理要为第二个下拉框添加change事件，当第二个下拉框选择不同的市时，需要用该市下的区数据填充到第三个下拉框里。 代码如图。

  • 09

    刷新页面，得到三个联动的下拉框，效果如图。

赞 (0)

相关推荐

  • Excel表格中怎么制作三级联动下拉菜单?

    有时我们需要在Excel中使用下拉菜单或多级下拉菜单功能,下面我们就介绍一下如何在Excel中创建下拉菜单 一.准备数据 1.我们事先把各级菜单及其内容写在Execl中以便后面使用 二.创建单级下拉菜 ...

  • Excel下拉菜单三级联动

    有时我们需要在Excel中使用下拉菜单或多级下拉菜单功能,下面我们就介绍一下如何在Excel中创建下拉菜单 准备数据 01 我们事先把各级菜单及其内容写在Execl中以便后面使用 创建单级下拉菜单 0 ...

  • Excel图表三级联动如何实现

    一在校生暑期到某商场总部参加社会实践,商场领导交给他一个看似简单的任务--用图表联动的方式统计空调的销售情况.这让自以为熟悉Excel的学生犯了难.其实用Excel和水晶易表结合,问题就简单多了. 具 ...

  • EXCEL表格中怎么制作三级联动的下拉菜单?

    Excel中下拉菜单功能可以帮助我们节省输入时间,通过选取下拉菜单中的值来实现输入数据,非常快捷.方便.但是日常工作中,我们常需要一个下拉菜单,让后面的下拉菜单依据前面的下拉菜单的内容的改变而改变(也 ...

  • Excel三级下拉菜单怎么做（Excel表格如何设置多级联动下拉菜单）

    Excel三级下拉菜单怎么做（Excel表格如何设置多级联动下拉菜单）

      平时工作过程中,经常会用到Excel表格,关于表格数据处理还有一些小技巧的.掌握一个小技巧,可能对办公效率的提高起到很大的作用.表格中对常见的可能就是表格下拉菜单的设置了.比如说[性别]这一栏,如 ...

  • ajax向服务器请求数据实现html页面局部刷新

    使用html的表单,可以提交数据到服务器,但是如果只是使用表单,那么数据提交的时候,整个页面都需要被刷新,当有部分数据需要从服务器加载的资源,发送请求后,会对整个页面进行提交,用户体验不是太好. 操作 ...

  • 表格数据有效性怎么设置多选（表格里面的数据有效性怎么设置）

    表格数据有效性怎么设置多选（表格里面的数据有效性怎么设置）

    Excel如何进行多层次联动数据有效性设置谢谢邀请.我是汤帅,一个PPT自由设计师,承接PPT定制.下拉菜单有时候因为原始数据过多,它的作用就并不是很明显.选项过于繁复,理性输入人会舍弃下拉选取数据, ...

  • Excel跨越合并

    Excel跨越合并,可以一次性将多行多列单元格合并成多行一列单元格,举个应用场景的例子:省市区三层分级的二维表格降维成为只有省一级的一维表格. Excel跨越合并 01 选中需要跨越合并的单元格. 首 ...

  • 社会管理创新服务平台整体解决方案

    操作方法 01 研发背景 当前,我国既处于发展的重要战略机遇期,又处于社会矛盾凸显期,社会管理任务更为艰巨繁重,我国社会管理滞后于经济发展的现象也愈来愈明显,在此背景下,深入推进社会管理创新工作,强化 ...