下拉列表（Dropdown List）是一種常見的用戶界面元素，用于提供一組選項供用戶選擇。它通常以一個展開的列表形式出現(xiàn)，用戶可以點擊或選擇列表中的一個選項。一般來說，他的選項值是由系統(tǒng)代碼組成的，所以一般是不能維護里里面的選項值，但是經(jīng)常會出現(xiàn)需要動態(tài)維護下拉列表的選項這種需求。所以今天就教大家如何通過輸入框動態(tài)維護下拉列表里面的選項值。

一、效果展示

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

【原型預(yù)覽及下載地址】

https://axhub.im/ax9/09b38389df30358f/#g=1&p=能在輸入框里自由編輯選項的下拉列表-js版

二、制作教程

1. 下拉列表的原理

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

我們知道axure演示是通過瀏覽器來實現(xiàn)的，歸根到底就是html、js、css代碼，這個在以前的js調(diào)用的文章里也有詳細講解，所以我們可以通過代碼調(diào)用，調(diào)用下拉列表，那下拉列表的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函數(shù)就可以實現(xiàn)了，? 將【的值替換成<option value=”值”>，將】的值替換成</option>，但是這種方式會限制了用戶輸入，必須【選項】這種格式來輸入，這樣就很不方便了。

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

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

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

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

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

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

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

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