分级下拉列表(含案例:省份-城市-县区全国数据的三级下拉列表) 售价8金币 获赏8金币 原型 付费

vigo 普通用户 2019-12-16 2198

今天,教大家如何做一个分级下拉列表。

原型预览地址:https://www.pmdaniu.com/storages/111207/47c954e892fccfe931d1b7637238b44a-69620/start.html?_d=Mon%20Dec%2016%202019%2013%3A50%3A42%20GMT%200800%20%28%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4%29?_d=Mon%20Dec%2016%202019%2014:38:13%20GMT+0800%20(%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4)#id=n5ndtc&p=%E6%A1%88%E4%BE%8B%EF%BC%9A%E4%BA%A7%E5%93%81-%E5%93%81%E7%89%8C-%E5%9E%8B%E5%8F%B7&g=1

该原型使用十分简单,只需要在中继器表格中填入一二三级内容即可。

该原型内包含了全国行政区划二级(省份-城市)和三级(省份-城市-区县)。

效果演示

制作方法:

1、材料

下拉框1个,中继器三个,中继器内文本框1个,右箭头一个,样式根据个人喜欢设计即可。

2、中继器表格

一级中继器内容
text为显示的内容
next为是否有下一级内容,如果有,不需填写;如果没有,填写1

二级中继器内容
text为上级的内容,即该二级是属于哪个一级的
text2为显示的内容
next为是否有下一级内容,如果有,不需填写;如果没有,填写1。eg:北京市只有两级,next填写1,则不会显示向右箭头

三级中继器内容
text为第一级的内容,即该内容是属于哪个一级的
text2的为第二级内容,即该内容是属于哪个二级的
text3为显示的内容

3、中继器内交互

3.1外框交互

这个比较简单,鼠标单击时,切换中继器一二三的隐藏/显示样式。

3.2中继器交互

一级中继器内容

每项加载时,设置文本框的文字为text列。如果next列不是空值,隐藏向右箭头。

二级中继器内容

每项加载时,设置文本框的文字为text2列。如果next列不是空值,隐藏向右箭头。

三级中继器内容

每项加载时,设置文本框的文字为text3列。

3.3中继器内文本框交互

鼠标单击时:添加筛选

即点击一级中继器的文本框时,筛选出二级item.text=this.text的值

点击二级点击一级中继器的文本框时,筛选出三级级item.text2=this.text的值

完成之后,以后使用只要更改中继器表格的数据即可,非常方便,所以推荐给大家使用。

今天的教程到这里就结束了,我们下期见。


付费附件(8金币)
登录后回复
打赏排行 用户名 打赏金额
第1名 耳又又 8金币
最新回复 (7)
  • cx19910822 普通用户 2020-7-29
    0 引用 8
    感谢分享
  • 亮_1594608676 普通用户 2020-7-23
    0 引用 7
    感谢分享
  • 紫蝴哲野 普通用户 2020-5-12
    0 引用 6
    感谢分享
  • 哈迪斯00 普通用户 2020-4-17
    0 引用 5
    3q
  • i.zhw 普通用户 2020-4-17
    0 引用 4
    谢谢
  • houwan123 普通用户 2020-4-14
    0 引用 3
    1
  • bin201581 普通用户 2019-12-17
    0 引用 2
    感谢楼主分享
返回