下拉列表有許多優點：它節省螢幕空間不佔地方，不需要做輸入驗證，所有平台都支援，技術門檻低，使用者都熟悉其使用方法。。它還可以有效幫助使用者縮小選擇範圍，轉換螢幕空間並防止錯誤的資料輸入。 然而，下拉列表又是最容易被錯誤使用的表單元件。過度使用或濫用它們可能會造成可用性問題的出現。 本文將針對下拉列表性質，告訴大家下拉列表的適用場景、設計技巧以及例項**怎樣正確使用下拉列表優化設計。
導航選單
下拉列表適用於陳列所有需要展示的子頁面，相當於子導航選單，將使用者帶到乙個新的位置。
內容分類
表單項
讓使用者選擇乙個選項設定表單字段
五個以內選項建議使用單選框或分段選擇器，這樣能一眼看到所有選項，而不需要下拉開啟選項選單。
選項較多且指向性明確建議使用可輸入下拉列表
如果使用者明確知道他們要什麼，允許使用者輸入選項，並在輸入的同時過濾出可能的答案，這樣可以節省翻閱長列表的時間。
純數值選項讓使用者在文字輸入框中鍵入會更快
通常來說，在手機上使用數字鍵盤輸入純數值會比在選單中選擇數值更加快一些。
避免列表過長
當選項超過 15 種時，使用者可能會不知所措。當使用者看到 20 多個未分類的選項時，即使使用者想在眾多選項中找到合適選項，但一定會出現滾動問題，使用者必須讓滑鼠在下拉框中，否則頁面就會隨下拉滾動。長下拉列表最經典案例：國家選擇器-有 100 多個選項。通常按字母順序排序。還有一種做法是把常用/流行的國家/地區放在頂部。 或者使用帶自動提示功能的文字框，提示使用者想要什麼。
避免選項過少
選項太少時使用下拉列表，反而給用帶來繁瑣的操作。因為下拉列表隱藏選項，使用者必須操作不必要的動作才能看到選項。
灰掉任何不可用的選項而不是刪除它們
某個選項被禁用或不可用時，應將其設定為灰色。將選項設定灰色指示其「已禁用」或「不可用」狀態。 同時可以加入提示，指示該選項被禁用的原因、如何讓其成為可用狀態。
輸入優先、下拉備選
某些情況下，輸入更快。 例如：輸入信用卡有效期。鍵入 mm/yy相比從兩個下拉列表中選擇月和年要快。 雖然自由輸入需要資料驗證，但在這一場景下，直接輸入仍然是最好的選擇。
組合下拉列表，減少操作
當選擇項由多個字段組成時，將幾個下拉列表組合，可以有效減少使用者操作。 例如：日期選擇下拉列表，有年、月、日甚至是小時、分、秒的選擇，如果用普通下拉列表則需要用到3-6個。而把這些選項組合成乙個下拉列表，就方便很多了。
下拉列表開啟時，保持選單標籤或描述。
使用者會根據他們的標籤選擇選單選項，因此提供準確的資訊很重要。在開啟選單時標籤被隱藏或刪除，使用者必須回憶他們在採取行動之前需要選擇的內容。隨時可能中斷使用者的任務。編寫簡潔標籤的準則：
↘ 動作選單項請使用動詞來描述將要發生的動作。 ↘ 鏈結使用名詞來標識使用者將定向到的頁面。 ↘ 排除選單項中多餘的描述性助詞；例如「刪除頁面」，而不是「刪除這個頁面」。 ↘ 將選單項保持在一行文字中。 ↘ 組織選單項的列表排序有邏輯順序。 ↘ 將選擇最多的選項排列在頂部，迭代更新最熱選項。
016 刪除列表框 下拉列表的選項
刪除列表框，下拉列表的選項有兩種方法 對htmlselectelement物件而言，它提供了如下方法用於刪除選項。上面方法中的index是需要刪除選項所在的索引值。如果該索引值比下拉列表中選項的最大索引值還大，或者索引值小於0，則該方法不會刪除任何選項。下面的頁面演示了動態增加下拉列表的選項，並可以...
ajax實現輸入框文字改變展示下拉列表的效果示例
1.樣式 複製 如下 2.html指令碼 複製 如下 省略常規指令碼 汽車品牌名 www.cppcns.come validate required disabled disabled onfocus showandhide list1 show onblur showandhide list1 h...
可輸入的Web下拉列表框控制項
vs2005提供的web下拉列表框 不支援輸入，只能選擇，我們可以繼承該控制項來支援輸入功能，實現的原理很簡單，就是增加乙個textbox控制項疊加在下拉列表框上，客戶端通過指令碼來同步這兩個控制項的值，先看看服務端 using system using system.collections.gen...