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

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

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

一、效果展示

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

原型地址：https://kv7s8o.axshare.com/#g=1

二、制作教程

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;” >。

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

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