可以输入文字的下拉列表

网页中下拉列表的选项是固定的，这样就存在一些弊端，如果用户想要选择的项目不在下拉菜单的选项中，该怎么办？如果能在下拉菜单中输入文字，这个问题就解决了。以下实例中，菜单选项中只包括了“新进成员”、“游侠”、“版主”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>