常見的用戶界面元素之一是下拉列表（Dropdown List），提供一組可選項(xiàng)供用戶選擇。該元素通常顯示為展開的列表形式，用戶可以通過單擊或選擇列表中的選項(xiàng)。對(duì)于下拉列表的選項(xiàng)，一般由系統(tǒng)代碼組成，因此通常無法對(duì)其進(jìn)行維護(hù)，但有時(shí)會(huì)需要?jiǎng)討B(tài)更新下拉列表的選項(xiàng)值。本文將介紹如何通過輸入框?qū)崿F(xiàn)下拉列表選項(xiàng)值的動(dòng)態(tài)更新。

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

一般來說，他的選項(xiàng)值是由系統(tǒng)代碼組成的，所以一般是不能維護(hù)里面的選項(xiàng)值，但是經(jīng)常會(huì)出現(xiàn)需要?jiǎng)討B(tài)維護(hù)下拉列表的選項(xiàng)這種需求。所以今天就教大家如何通過輸入框動(dòng)態(tài)維護(hù)下拉列表里面的選項(xiàng)值。

一、效果展示

1. 在輸入框里新增或者修改選項(xiàng)，維護(hù)后下拉列表選項(xiàng)和輸入框里的一致
2. 選項(xiàng)可以手動(dòng)修改，也可以批量復(fù)制到輸入框

二、制作教程

1. 下拉列表的原理

我們?nèi)绻胊xure自帶的下拉列表，他只能在編輯界面修改下拉列表的值，沒有辦法在演示界面修改。但是如果我們知道下拉列表的原型，就可以通過修改代碼的方式，實(shí)現(xiàn)在演示界面動(dòng)態(tài)維護(hù)下拉列表的效果

我們知道axure演示是通過瀏覽器來實(shí)現(xiàn)的，歸根到底就是html、js、css代碼，這個(gè)在以前的js調(diào)用的文章里也有詳細(xì)講解，所以我們可以通過代碼調(diào)用，調(diào)用下拉列表，那下拉列表的html代碼其實(shí)就是：

<select>

<option value=”值”>選項(xiàng)1</option>
<option value=”值”>選項(xiàng)2</option>
<option value=”值”>選項(xiàng)3</option>
<option value=”值”>選項(xiàng)4</option>

</select>

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

2. 文本框里文本的處理

那我們?cè)鯓訉?duì)文本框里的值進(jìn)行處理呢？如果可以有特殊標(biāo)記的話，例如用每個(gè)選項(xiàng)用【】包圍，這樣我們用replace函數(shù)就可以實(shí)現(xiàn)了，? 將【的值替換成<option value=”值”>，將】的值替換成</option>，但是這種方式會(huì)限制了用戶輸入，必須【選項(xiàng)】這種格式來輸入，這樣就很不方便了。

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

但是這里還有一個(gè)問題，用戶輸入每個(gè)選項(xiàng)的長度值是未知的，我們?cè)鯓尤ゴ_定要取多少位呢？這里我們可以用第二個(gè)函數(shù)indexOf來確認(rèn)，這個(gè)函數(shù)可以找出指定內(nèi)容第一次出現(xiàn)的位置，那我們只需要尋找換行的位置，提取換行之前的內(nèi)容，再將文本以前一后添加，這樣就可以將字符轉(zhuǎn)為對(duì)應(yīng)的格式。

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

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

那如果值為空，我們就提取完成結(jié)束循環(huán)，結(jié)束循環(huán)我們用設(shè)置文本的交互，將提取完成的選項(xiàng)值設(shè)置到通過設(shè)置文本，設(shè)置到<select></select>里面，然后觸發(fā)js重新調(diào)用輸入框就可以了。

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

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

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。