可以輸入文字的下拉列表

網頁中下拉列表的選項是固定的，這樣就存在一些弊端，如果用戶想要選擇的項目不在下拉菜單的選項中，該怎么辦？如果能在下拉菜單中輸入文字，這個問題就解決了。以下實例中，菜單選項中只包括了“新進成員”、“游俠”、“版主”3個選項，如果要添加的用戶是上面三個選項以外的等級，就可以在下拉菜單中直接輸入等級名稱。程序運行結果如圖：

由於下拉菜單的選項是固定的，所以要實現在下拉菜單中輸入文字，首先要捕獲用戶的鍵盤事件，然后根據鍵盤輸入的數據動態添加下拉菜單的選項，同時還需要判斷用戶按下的是退格鍵還是空格鍵，如果是退格鍵，則需要從已經添加的文字中刪除一個文字，如果是空格鍵，則需要在已經添加的文字后添加一個空格字符。

本實例主要應用javascript來設置元素的innerText屬性、應用String對象的fromCharCode（）方法以及select元素對象option數組的remove（）方法。下面分別介紹下。

 innerText屬性：用於修改其實標記與結束標記之間的文本。

 fromCharCode方法：返回指定數值對應的字符，即將數值轉換為字符。

 remove方法：刪除option數組中的對應選項。

（1）在頁面中添加“等級名稱”下拉菜單，其中包括“新進成員”、“游俠”、“斑竹”3個選項，代碼如下：

<form name="form1">
  <select name="sel_grand" id="sel_grand" onkeypress="add_opt(3)" onkeyup="edit_opt(3)">
        <option selected>新進成員</option>
        <option>游俠</option>
        <option>斑竹</option>
      </select>
</form>

（2）在select標記的onkeypress事件中調用自定義函數add_opt(opt),用於在下拉菜單中添加新的選項，並設置該選項為選中狀態，代碼如下： 

function add_opt(opt){
//opt表示現有可選項的數目
    form1.sel_grand.options[opt]=new Option(ok=(form1.sel_grand.options[opt])?
    form1.sel_grand.options[opt].innerText+String.fromCharCode(event.keyCode):
    String.fromCharCode(event.keyCode),ok)
    form1.sel_grand.selectedIndex=opt;
}

（3）在select標記的onkeyup事件中調用自定義函數edit_opt(opt)，用於處理當用戶按下退格鍵是，將已經寫到下拉菜單中的文字刪除，當用戶按下空格鍵時，在下拉菜單中添加一個空格字符，代碼如下：

function edit_opt(opt){
//opt表示現有可選項的數目
    if(form1.sel_grand.options[opt]){
        if(event.keyCode==8){
            var str=form1.sel_grand.options[opt].innerText;
            var len=str.length;
            form1.sel_grand.options[opt].innerText=str.substring(0,len-1);
            if(form1.sel_grand.options[opt].innerText==""){
                form1.sel_grand.remove(opt);
                form1.sel_grand.selectedIndex=1;
            };
        }
        if(event.keyCode==32){
            form1.sel_grand.options[opt].innerText+=" ";
        }
    }
}
</script>