请教select如何实现回应键盘type,自动选中item,并自动scroll to 到该选中的item

/***Date:2007/12/18****/
window.inpect = function(parent ,width){ //基本属性 public
this.parent = (typeof parent == 'undefined')?document.body:parent;
this.width =  parseInt((typeof width == 'undefined')?130:width); //获取对象方法 private
var $ = function(el){
return (typeof el == 'object')?el:document.getElementById(el);
};

//初始化控件 private
this.init = function(){
var strHTML = "<div style='position:absolute;z-index:1;clip:rect(3 280 20 "+ this.width +");'>"
+ "<select id='sel' style='width:"+ (this.width+17) +"'></select>"
+ "</div>"
+ "<div style='position:absolute;z-index:2;'>"
+ "<input hideValue='' id='inp' style='width:"+ (this.width+17) +"; height:20;'>"
+ "</div>";
this.parent.innerHTML = strHTML;

};this.init();

//选中赋值 anonymous 
$("sel").onchange = function(){
$("inp").value = this.options[this.selectedIndex].text;
$("inp").hideValue = this.value;
};

//添加option public
this.addOption = function(text ,value){
var op= new Option(text ,value);
$("sel").options.add(op);
}; //给控件赋值 public
this.setValue = function(value){
$("inp").value = selOption(value);
$("inp").hideValue = value;
}; //获取控件值 public
this.getValue = function(){
return $("inp").hideValue;
}; //选中控件 private
var selOption = function(value){
if($("sel").options.length != 'undefined'){
for(var i=0;i<$("sel").options.length;i++){
if($("sel").options[i].value == value){
$("sel").options[i].selected = true;
return $("sel").options[i].text;
}
}
}
};
};

解决方案 »

  1.   

    <html> 
    <head> 
    </head> 
    <body> 
    <select id="sel">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
    <option value="e">e</option>
    <option value="f">f</option>
    <option value="g">g</option>
    <option value="h">h</option>
    <option value="i">i</option>
    <option value="j">j</option>
    <option value="k">k</option>
    <option value="l">l</option>
    <option value="m">m</option>
    <option value="n">n</option>
    <option value="o">o</option>
    <option value="p">p</option>
    <option value="q">q</option>
    <option value="r">r</option>
    <option value="s">s</option>
    <option value="t">t</option>
    <option value="u">u</option>
    <option value="v">v</option>
    <option value="w">w</option>
    <option value="x">x</option>
    <option value="y">y</option>
    <option value="z">z</option>
    </select>
    <script>
    var sel;
    window.onload=function()
    {
      sel=document.getElementById("sel");
      document.onkeydown=Hanlder;
    }
    function Hanlder(e)
    {
      e=e||event;
      var k=String.fromCharCode(e.keyCode).toLowerCase();//从asc转换为字符，为字符时e.keyCode全为大写字符
      for(var i=0;i<sel.options.length;i++)
        if(sel.options[i].value==k)
        {
           sel.options[i].selected=true;
           break;
        }
    }
    </script>
    </body> 
    </html>