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

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

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

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

效果演示

制作方法：

一、材料

下拉框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協議