Axure教程:分級下拉列表

12 評論 13906 瀏覽 57 收藏 5 分鐘

本文教大家做一個分級下拉列表,該原型內包含了全國行政區劃二級(省份-城市)和三級(省份-城市-區縣),一起來看看~

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

該原型使用十分簡單,只需要在中繼器表格中填入一二三級內容即可。

該原型內包含了全國行政區劃二級(省份-城市)和三級(省份-城市-區縣)。

效果演示

制作方法:

一、材料

下拉框1個,中繼器三個,中繼器內文本框1個,右箭頭一個,樣式根據個人喜歡設計即可。

二、中繼器表格

一級中繼器內容

text為顯示的內容

next為是否有下一級內容,如果有,不需填寫;如果沒有,填寫1

二級中繼器內容

text為上級的內容,即該二級是屬于哪個一級的

text2為顯示的內容

next為是否有下一級內容,如果有,不需填寫;如果沒有,填寫1。eg:北京市只有兩級,next填寫1,則不會顯示向右箭頭

三級中繼器內容

text為第一級的內容,即該內容是屬于哪個一級的

text2的為第二級內容,即該內容是屬于哪個二級的

text3為顯示的內容

三、中繼器內交互

(1)外框交互

這個比較簡單,鼠標單擊時,切換中繼器一二三的隱藏/顯示樣式。

(2)中繼器交互

一級中繼器內容

每項加載時,設置文本框的文字為text列。如果next列不是空值,隱藏向右箭頭。

二級中繼器內容

每項加載時,設置文本框的文字為text2列。如果next列不是空值,隱藏向右箭頭。

三級中繼器內容

每項加載時,設置文本框的文字為text3列。

(3)中繼器內文本框交互

鼠標單擊時:添加篩選。

即點擊一級中繼器的文本框時,篩選出二級item.text=this.text的值。點擊二級點擊一級中繼器的文本框時,篩選出三級級item.text2=this.text的值。完成之后,以后使用只要更改中繼器表格的數據即可,非常方便,所以推薦給大家使用。

今天的教程到這里就結束了,有問題或者想下載原型的小伙伴們可以在下方評論處給我留言哦,我們下期見。

原型預覽地址: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

 

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 教程里,篩選說得太簡單,批注一下:
    一級中繼器添加篩選時,目標選二級篩選器,且篩選規則為:[[Item.text==TargetItem.text]](二級篩三級同理)
    親測,這樣才能成功。

    來自重慶 回復
  2. 原型預覽及下載地址:
    https://axhub.im/ax9/042b0c52f140ea4e/#g=1

    來自廣東 回復
  3. 這教程坑你爹呢,你不想讓人知道就不要分享,搞出些亂七八糟的東西來誤導人,浪費人時間

    來自云南 回復
    1. 我按照作者思路做出來了,思路正確沒問題的。

      來自廣東 回復
    2. 感覺還行啊

      來自廣東 回復
    3. 二級篩選三級的時候怎么篩選啊,我怎么寫都是錯的

      來自江蘇 回復
  4. 學習了;是否有這樣的控件可以直接使用的?

    回復
  5. 教程里面有個地方沒寫清楚,篩選時候的交互應該是[[TargetItem.text == This.text]],不然篩選的對象就變成自己了。

    來自江蘇 回復
    1. 多謝大佬點睛

      來自河北 回復
  6. 大哥,原型看下唄

    來自陜西 回復
  7. 這個下拉框不錯,可以分享下源文件嗎?

    來自上海 回復
    1. 這哥們是賣原型的,怎么會輕易分享給你

      來自浙江 回復