当用户按下 a 字母的时候,下拉框select里面的内容立即定位到a字母开头的选项,这个怎么实现?

wd_318(想当程序员) 我运行的时候报错，说不支持这个方法！！你是在IE的什么版本下运行的？？

我为什么在<select>框里按字母，它会自动过去呀！

我用的是win2000自带的IE5.0, 测试过了,可能用的呀?

onkeypress=myselect(test)
也可以改成 onkeydown 再试试看

To: wd_318(想当程序员)  <script language='javascript'>
function myselect(test)
{
    for(var i=1;i<(test.length);i++)
            if( test.options[i].text.charat(0)==String.fromCharCode(event.keyCode))
            {
                 test.selectedIndex=i;
            }
}
</script>
你的函数text.charat(0)是不是应该改成text.charAt(0).
但是改了之后又出问题，它总是定位到A字母开头的最后一项，而不是第一项，当再按A键的时候，也不会往下移动？？

改成如下好一点，不过还有点小问题，还是你自己花点时间改一下吧^_^<script language='javascript'>
function myselect(test)
{
    var i;
if(test.options[test.selectedIndex].text.charAt(0)==String.fromCharCode(event.keyCode))
{
for(i=test.selectedIndex+1;i<(test.length);i++)
            if( test.options[i].text.charAt(0)==String.fromCharCode(event.keyCode))
            {
                 test.selectedIndex=i;
            }
}
else
{
for(i=1;i<(test.length);i++)
            if( test.options[i].text.charAt(0)==String.fromCharCode(event.keyCode))
            {
                 test.selectedIndex=i;
            }
}
}
</script>

老大们啊，讨论什么呀只要你给select控件一个焦点，按a的时候自动就是了，想实现必须使select获得焦点，只要有了焦点其他都是windows自动完成的啊

**I think these sourcecodes are just you need:
**Please input the number 1-999(just for test),the number you need
will auto in the selectbox.when you select a number or not input a
number in the text,you can use the "right" key to reselect.
**
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT>

        var Arraytest=new Array()
        //best i=<10000
        for (i=0;i<1000;i++)
           {
           Arraytest[i]=String(i)




           }


      function window_onload()
{

div1.style.visibility="hidden"
}function Find(obj)
{
n=obj.value.length

for(i=div1.children[0].options.length-1;i>=0;i--)
{
div1.children[0].remove(i)
}
for(i=0;i<Arraytest.length;i++)
{
if(Arraytest[i].substring(0,n).toLowerCase()==obj.value.toLowerCase())
{
op=document.createElement("option")
op.value=Arraytest[i]
op.text=Arraytest[i]
div1.children[0].add(op)
}
}

if(event.keyCode==40)
{
div1.children[0].focus()
div1.children[0].selectedIndex=0
}
div1.style.visibility="visible"
}
function getvalue(obj)
{
table1.rows[0].cells[0].children[0].value=obj.value
hide()
}
function getvalue1(obj)
{
if(event.keyCode==13)
{getvalue(obj)}
}
function hide()
{
div1.style.visibility="hidden"
}
</SCRIPT>
</HEAD>
<BODY onload="window_onload()">
<FORM  name="AddNote">
<table border=0 id="table1">
<tr>
<td>
<input name="seltext" onkeyup="Find(this)" ondblclick="Find(this)" >
</td>
</tr>

<TR> <TD>
<div id=div1 style="z-index:1;position:absolute">
<select size=10 id=div1.children[0] style="; width:300" onclick="getvalue(this)" onkeyup="getvalue1(this)">
</select>
</div>
</TD> </TR>
</table>
</form>
</BODY>
</HTML>

无非就是从select的每一项目查起，遇到第一个带A打头的就定位到那里。一个历遍加查找很容易就搞定。

我有一个完全满足你的要求的javaScript类，如果你需要的话可以发mail:
[email protected]

zhouxhh() ::你的Javascript类。很大吗？？直接在这里贴出来不可以吗？？？

<select name="AREA_NO">
               <option value="01">Ò»</option>
               <option value="02">¶þ</option>
               <option value="03">ÈøÄ·</option>
               <option value="04">ÈøÄ·Èý</option>
               <option value="05">µÄ</option>
               <option value="06">Ë¹µÙ·Ò</option>
               <option value="07" selected="">µÄ</option>
               <option value="08">µØ·½1</option>
               <option value="09">µØ·½2</option>
               <option value="10">µØ·½3</option>
        </select>


<script>
var HtmlExt=new HtmlExt;if (window.HtmlExt)
HtmlExt.makeSelectsExt(document.all.tags('select'));  //Select Ext. Class
function HtmlExt() {
/**
    * @description :Select¶ÔÏóµÄ¹¦ÄÜÀ©³äº¯Êý¡£µ±Select¶ÔÏó»ñµÃ½¹µã²¢ÊäÈë×Ö·ûÊ±£¬
    :¿ÉÒÔ×Ô¶¯¹ö¶¯µ½ÏàÓ¦µÄÎ»ÖÃ¡£
    * @parameters  :oSels ÒªÀ©Õ¹µÄSelect¶ÔÏó£¨»òSelect¶ÔÏóÊý×é£©
    * @returns :
    */
    this.makeSelectsExt=function(oSels) { //public
    if ((oSels!=null)&&(oSels.length))
    for (var i=0;i<oSels.length;i++)
    this.makeSelectExt(oSels[i]);
    }
    this.makeSelectExt=function(oSel) { //private
    if (oSel!=null) {
    oSel.attachEvent("onfocus",HtmlExt.oSelOnFocus);
    oSel.attachEvent("onkeydown",HtmlExt.oSelOnKeyDown);
    oSel.attachEvent("onkeypress",HtmlExt.oSelOnKeyPress);
    }
}
this.oSelOnFocus=function() { //private
var oSel=event.srcElement;
oSel.inputBuf='';
}
this.oSelOnKeyDown=function() { //private
if (event.keyCode==8) { //ÍË¸ñ¼ü´¦Àí
event.returnValue=false;
event.cancelBubble=true;
var oSel=event.srcElement;
oSel.inputBuf=oSel.inputBuf.substr(0,oSel.inputBuf.length-1);
HtmlExt.oSelScrollByInput(oSel);
} else if (event.keyCode==46) { //É¾³ý¼ü´¦Àí
var oSel=event.srcElement;
oSel.inputBuf="";
}
}
this.oSelOnKeyPress=function() {//private
event.returnValue=false;
var oSel=event.srcElement;
var oChar=String.fromCharCode(event.keyCode).toUpperCase();
if (oSel.inputBuf)
oSel.inputBuf=oSel.inputBuf+oChar;
else
oSel.inputBuf=oChar;
HtmlExt.oSelScrollByInput(oSel);
}
this.oSelScrollByInput=function(oSel) { //private
var oOptions=oSel.options;
if ((!oSel.inputBuf)||(oSel.inputBuf==''))
oSel.selectedIndex=0;
else
for (var i=0;i<oOptions.length;i++)
if ((oOptions[i].text.toUpperCase().indexOf(oSel.inputBuf)==0)
|| (oOptions[i].text.toUpperCase().indexOf(oOptions[i].value+' '+oSel.inputBuf)==0)
|| (oOptions[i].value.toUpperCase().indexOf(oSel.inputBuf)==0)) {
oSel.selectedIndex=i;
return i;
}
return -1;
}
} </script>

zhouxhh() :兄弟，我运行的时候，根本就没有什么效果？？你自己运行一下先？？多谢帮忙·！

你先把下拉框中的内容改一下（先改成英文的试一下），可以把乱码部分的注释删掉。还有：我用的是win2000+IE5.5(SP1)，可能是运行环境有差异？？？我没有在其它环境下试过

zhouxhh():我改了一下,运行可以了,但是又出来一个新问题,就是我的select下拉框里面的内容是从数据库里面读出来的,好象不支持这种效果!如果是在select下拉框里面事先加入一些项目就是可以实现这个功能,请问你这是什么原因,多谢你的帮助,有机会请你吃饭,我在深圳!!

给我发mail说说详细的情况吧。

zhouxhh() :你没明白我的意思吗??就是我的下拉框里面的内容不是事先就有东西,是空的,当运行JSP程序的时候才将内容放到下面去了!!,然后再运行脚本的时候就不支持这种效果了,<select name="AREA_NO">
               <option value="01">Ò»</option>
               <option value="02">¶þ</option>
               <option value="03">ÈøÄ·</option>
               <option value="04">ÈøÄ·Èý</option>
               <option value="05">µÄ</option>
               <option value="06">Ë¹µÙ·Ò</option>
               <option value="07" selected="">µÄ</option>
               <option value="08">µØ·½1</option>
               <option value="09">µØ·½2</option>
               <option value="10">µØ·½3</option>
        </select>


如果是这样的select的话就支持!!但是如果里面的内容用一个循环从数据库里面读出来的时候,就没有了这种效果了!!

一样是可以的，但是你好保证在select完全创建完成之后调用makeSelectsExt,或者你加个延时试试

一定要保证调用makeSelectsExt()在select完全生成之后

调试易

当用户按下 a 字母的时候,下拉框select里面的内容立即定位到a字母开头的选项,这个怎么实现?

解决方案 »