Axure高保真教程:通過文本框維護下拉列表選項

0 評論 4596 瀏覽 5 收藏 8 分鐘

常見的用戶界面元素之一是下拉列表(Dropdown List),提供一組可選項供用戶選擇。該元素通常顯示為展開的列表形式,用戶可以通過單擊或選擇列表中的選項。對于下拉列表的選項,一般由系統代碼組成,因此通常無法對其進行維護,但有時會需要動態更新下拉列表的選項值。本文將介紹如何通過輸入框實現下拉列表選項值的動態更新。

下拉列表(Dropdown List)是一種常見的用戶界面元素,用于提供一組選項供用戶選擇。它通常以一個展開的列表形式出現,用戶可以點擊或選擇列表中的一個選項。

一般來說,他的選項值是由系統代碼組成的,所以一般是不能維護里面的選項值,但是經常會出現需要動態維護下拉列表的選項這種需求。所以今天就教大家如何通過輸入框動態維護下拉列表里面的選項值。

一、效果展示

  1. 在輸入框里新增或者修改選項,維護后下拉列表選項和輸入框里的一致
  2. 選項可以手動修改,也可以批量復制到輸入框

二、制作教程

1. 下拉列表的原理

我們如果用axure自帶的下拉列表,他只能在編輯界面修改下拉列表的值,沒有辦法在演示界面修改。但是如果我們知道下拉列表的原型,就可以通過修改代碼的方式,實現在演示界面動態維護下拉列表的效果

我們知道axure演示是通過瀏覽器來實現的,歸根到底就是html、js、css代碼,這個在以前的js調用的文章里也有詳細講解,所以我們可以通過代碼調用,調用下拉列表,那下拉列表的html代碼其實就是:

<select>

<option value=”值”>選項1</option>
<option value=”值”>選項2</option>
<option value=”值”>選項3</option>
<option value=”值”>選項4</option>

</select>

可以看到其實他的選項值就是? <option value=”值”>選項1</option>,所以我們要對輸入框里的文本值做變換,變換成上面的格式,然后在修改代碼,這樣就可以替換下拉列表里的選項值了。

2. 文本框里文本的處理

那我們怎樣對文本框里的值進行處理呢?如果可以有特殊標記的話,例如用每個選項用【】包圍,這樣我們用replace函數就可以實現了,? 將【的值替換成<option value=”值”>,將】的值替換成</option>,但是這種方式會限制了用戶輸入,必須【選項】這種格式來輸入,這樣就很不方便了。

所以我們就要比較麻煩對函數就行分割了,首先我們要準備幾個文本,用來記錄和處理文本,我們可以用slice函數,slice函數可以去指定段落的文本出來,例如取前三位就把選項1取出來了,這樣我們把選項1組成新的文本,加上以前一后,就變成? <option value=”值”>選項1</option>,然后繼續取選項2,直到輸入框里的值都取完。

但是這里還有一個問題,用戶輸入每個選項的長度值是未知的,我們怎樣去確定要取多少位呢?這里我們可以用第二個函數indexOf來確認,這個函數可以找出指定內容第一次出現的位置,那我們只需要尋找換行的位置,提取換行之前的內容,再將文本以前一后添加,這樣就可以將字符轉為對應的格式。

那我們只需要寫個循環,先提取第一行的選項1,將格式轉為? <option value=”值”>選項1</option>,然后在去第二行的選項2,將格式轉為<option value=”值”>選項2</option>,在通過設置文本,將他和前面記錄的<option value=”值”>選項1</option>合在一起,這里用在target.text后面增加新提取合并的文本即可。

上面是存在換行的條件,如果已經是最后一行,就沒有換,那我們就判斷輸入框是否為空,那如果不為空,最后一個選項就是輸入框里的文本你,我們直接將他提取合并即可。

那如果值為空,我們就提取完成結束循環,結束循環我們用設置文本的交互,將提取完成的選項值設置到通過設置文本,設置到<select></select>里面,然后觸發js重新調用輸入框就可以了。

到這里我們基本級完成了,如果需要調整下拉列表的尺寸,我們也可以通過width和height字段修改,例如寬200高30的輸入框,我們就可以寫成這樣<select style=”width: 200px; height: 30px;” >。

這樣我們就制作完成了通過文本框維護下拉列表選項的原型模板了,下次使用時,只需要復制粘貼,修改輸入框里的選項文字,即可自動實現動態維護下拉列表選項的效果了,是不是很方便呢?當然,后續你們也可以根據需要,增加一些效果,例如把輸入框放在彈窗里,通過按鈕顯示彈窗,再修改下拉列表的值。

那以上就是本期教程的全部內容,感興趣的同學們可以動手試試哦,感謝您的閱讀,我們下期見。

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

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!