大家經(jīng)常會看到這樣的功能設(shè)計：可以多選，但是限制多選。比如某招聘網(wǎng)站城市的選擇只能選擇5個。再選擇第6個的時候會提示最多只能選擇5項。

這個效果是我們經(jīng)常會遇到的，在工作中也經(jīng)常會遇到需要制作這樣的效果。今天我們一起來看看，這個交互效果可以怎么做。

這個效果具體是怎樣的呢？

1、選擇地區(qū)，所選擇的地區(qū)顯示在選中欄中

2、選擇到規(guī)定數(shù)量之后，再選擇，顯示提示

3、刪除原選擇項，即可再進行項目選擇。

這里咱們不做5個選項那么多了，先做3個吧，明白制作原理之后依次類推即可。

1、簡單地搭建一下場景，制作選項

接著把選擇地區(qū)的顯示框和提示隱藏掉，在進行某個交互操作的時候再將它們顯示出來。

2進行交互設(shè)置

?

首先是效果1：選擇地區(qū)，所選擇的地區(qū)顯示在選中欄中

這個比較簡單。點擊第一個城市時，如果第一個顯示框中沒有內(nèi)容，則城市名顯示在第一個框中，如果已有內(nèi)容，則顯示在第二個框中，依次類推。

所以需要用到用例條件：空、文字于 1 != 文字于 This、文字于 2 != 文字于 This等三種

在判斷之后，顯示相應(yīng)的顯示框，并且設(shè)置中相應(yīng)的顯示框的文字等于該部件的文字即可

?接著設(shè)置效果2：選擇到規(guī)定數(shù)量之后，再選擇，顯示提示

上一步的條件設(shè)置的是前三次的點擊，在進行第四次的點擊的時候，我們需要設(shè)置顯示提示。那么問題來了，如何判斷點擊的次數(shù)呢？

對了，利用全局變量。我們設(shè)置全局變量的默認值為0，在前三次點擊的時候，每一次點擊都將這個值加1。在判斷條件的時候也將其作為判斷依據(jù)

在第四次點擊，即設(shè)置條件4的時候，判斷全局變量的值是否大于2（或者大于等于3），顯示提示。

?

最后設(shè)置效果3：刪除原選擇項，即可再進行項目選擇。

在刪除原選項的時候，與添加時相反，將全局變量的值減去1即可。在減去的同同時，不要忘了，顯示框會發(fā)生變化。

這里采用的做法是將前一個顯示框中的文字顯示為后一個顯示框中的文字。比如，第一個選擇的是廣州，第二個選擇的是深圳。

假如這時刪除廣州，則原來顯示廣州的位置顯示為深圳，深圳則顯示為空白，并且隱藏。

?

注意這里不能將第一個顯示框直接隱藏，需要做出調(diào)整。也可隱藏后將部件的位置進行移動，這種方法如果有興趣可以試試看。

在一個部件上將交互設(shè)置好，確認無誤之后直接復制到其他部件上即可，可以節(jié)省我們很多時間。

有限的選擇在很多交互設(shè)置上都常見，分析的過程和設(shè)置的思路基本都是類似，掌握了之后就可以廣泛使用了。

?