本文教大家做一個(gè)分級(jí)下拉列表，該原型內(nèi)包含了全國(guó)行政區(qū)劃二級(jí)（省份-城市）和三級(jí)（省份-城市-區(qū)縣），一起來(lái)看看~

今天，教大家如何做一個(gè)分級(jí)下拉列表。

該原型使用十分簡(jiǎn)單，只需要在中繼器表格中填入一二三級(jí)內(nèi)容即可。

該原型內(nèi)包含了全國(guó)行政區(qū)劃二級(jí)（省份-城市）和三級(jí)（省份-城市-區(qū)縣）。

效果演示

制作方法：

一、材料

下拉框1個(gè)，中繼器三個(gè)，中繼器內(nèi)文本框1個(gè)，右箭頭一個(gè)，樣式根據(jù)個(gè)人喜歡設(shè)計(jì)即可。

二、中繼器表格

一級(jí)中繼器內(nèi)容

text為顯示的內(nèi)容

next為是否有下一級(jí)內(nèi)容，如果有，不需填寫(xiě)；如果沒(méi)有，填寫(xiě)1

二級(jí)中繼器內(nèi)容

text為上級(jí)的內(nèi)容，即該二級(jí)是屬于哪個(gè)一級(jí)的

text2為顯示的內(nèi)容

next為是否有下一級(jí)內(nèi)容，如果有，不需填寫(xiě)；如果沒(méi)有，填寫(xiě)1。eg：北京市只有兩級(jí)，next填寫(xiě)1,則不會(huì)顯示向右箭頭

三級(jí)中繼器內(nèi)容

text為第一級(jí)的內(nèi)容，即該內(nèi)容是屬于哪個(gè)一級(jí)的

text2的為第二級(jí)內(nèi)容，即該內(nèi)容是屬于哪個(gè)二級(jí)的

text3為顯示的內(nèi)容

三、中繼器內(nèi)交互

（1）外框交互

這個(gè)比較簡(jiǎn)單，鼠標(biāo)單擊時(shí)，切換中繼器一二三的隱藏/顯示樣式。

（2）中繼器交互

一級(jí)中繼器內(nèi)容

每項(xiàng)加載時(shí)，設(shè)置文本框的文字為text列。如果next列不是空值，隱藏向右箭頭。

二級(jí)中繼器內(nèi)容

每項(xiàng)加載時(shí)，設(shè)置文本框的文字為text2列。如果next列不是空值，隱藏向右箭頭。

三級(jí)中繼器內(nèi)容

每項(xiàng)加載時(shí)，設(shè)置文本框的文字為text3列。

（3）中繼器內(nèi)文本框交互

鼠標(biāo)單擊時(shí)：添加篩選。

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

今天的教程到這里就結(jié)束了，有問(wèn)題或者想下載原型的小伙伴們可以在下方評(píng)論處給我留言哦，我們下期見(jiàn)。

原型預(yù)覽地址：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 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于CC0協(xié)議