巨难：下拉框按字母键选取相关拼音首字母的问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body>
<script language="javascript">
//使用时先把聚焦到select标签，如果你想当焦点在其他地方时，也能调用此函数的话，需要做一些小的修改
function myFunc(mySelect)
{
  alert("Calling myFunc(mySelect)： " + event.keyCode);
  switch(event.keyCode)
  {
    case 65 : mySelect.selectedIndex = 0;break;//A//这里选中第一个option，键值可以自己定义。
    case 66 : mySelect.selectedIndex = 1;break;//B
    case 67 : mySelect.selectedIndex = 2;break;//C
    case 68 : mySelect.selectedIndex = 3;break;//D
  }
}
</script>
<form name="form1">
<select name="mySelect" onkeyup="myFunc(this)">
<option value="v1">中文1</option>
<option value="v1">中文2</option>
<option value="v1">中文3</option>
<option value="v1">中文4</option>
</select>
</form>
</body>
</html>

解决方案 »

  1.   

    可是我的下拉框是用数据库中的项目动态生成的。毫无规律可言啊。而且项目超过300个以上，我这样写的话，要写多少个case呢？
      

  2.   

    把它的拼音和汉字一起作为option的text：如shanghai/上海
      

  3.   

    你不是还有value值吗？text用中文，value用英文
      

  4.   

    我写的htc控件，看看对你有没有帮助，例子中有两个文件，都放在同一个目录下。
    test.htm
    <HTML>
    <!--
    每修改一次文件，都必须在修改人中增加自己的名字
    ===============================================
    描述：
    作者：
    最后修改时间：
    修改人：
    ===============================================
    -->
    <HEAD>
    <TITLE>测试</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=GB2312">
    </HEAD>
    <BODY>
    <CENTER>
    <DIV align="center" width="100%">
    <TABLE border="0" align=center style="font-size:9pt">
    <TR>
    <TD>索引：<INPUT id="infoText" type="text" size="30" style="behavior:url(IndexSearch.htc);" autobind="true" datasource="selUsers"/></TD>
    </TR>
    <TR>
    <TD>
    <SELECT size="5" id="selUsers" multiple style="width:245;height:150">
          <option value="admin">临时站点管理员</option>
          <option value="administrator">系统管理员</option>
          <option value="anonymous">匿名用户</option>
          <option value="Teach1">培训用户一</option>
          <option value="Teach2">培训用户二</option>
          <option value="Teach3">a三</option>
          <option value="Teach3">b</option>
          <option value="Teach3">c</option>
          <option value="Teach3">d</option>  
          <option value="Teach3">小明</option>                           
          <option value="Teach3">张三</option>                                 
          <option value="Teach3">李四</option>                                       
    </SELECT>
    </TD>
    </tr>
    </table>
    </DIV>
    </CENTER>
    </BODY>
    </HTML>IndexSearch.htc
    /*======================================================================
    描述：对指定的SELECT框中的内容进行索引，给用户提供根据索引文字
          快速定位SELECT框中内容的功能
    作者：Evonne
    版本：1.0.1
    最后修改时间：2003-01-06 21:37
    修改内容：修改datasource对象的获取方式，原来采用eval(this.datasource)的方式
              在datasource元素放在form中时不适用，现改为element.document.all(this.datasource)
    ========================================================================*//*---------接口定义----------------- 方法：bind()     ----- 参数-无，功能-绑定数据源，初始化索引数组
    属性：datasource ----- 数据源 SELECT 元素的ID
      autobind   ----- 指定是否由控件自动绑定数据源与初始化索引数组
    事件：无
    ------------------------------------*/
    <PUBLIC:COMPONENT><PUBLIC:PROPERTY NAME="datasource"/>
    <PUBLIC:PROPERTY NAME="autobind" VALUE="FALSE"/><PUBLIC:METHOD   NAME="bind" INTERNALNAME="_initIndex"/><PUBLIC:ATTACH   EVENT ="ondocumentready" ONEVENT ="initComponent()"/>
    <PUBLIC:ATTACH   EVENT="onkeyup" ONEVENT="event_onIndexTextChange()"/><SCRIPT language="JavaScript"> var arrIndex = new Array(); //---索引数组
    var indexText; //临时变量，保存临时索引文本

    //---根据autobind
    function initComponent()
    {
    if(this.autobind.toUpperCase() == "TRUE")
    {
    _initIndex();
    }
    }

    //---初始化数据索引
    function _initIndex()
    {
    var oDatasource = eval(element.document.all(this.datasource));
    var i;
    for(i=0;i<oDatasource.options.length;i++)
    {
    arrIndex[i] = oDatasource.options[i].innerText;
    }
    }

    function event_onIndexTextChange()
    {
    var sInputText = this.value;
    var oDatasource   = eval(element.document.all(this.datasource));
    if(sInputText.length > 0 && sInputText != indexText)
    {
    indexText = sInputText;
    locateIndexText(sInputText,oDatasource);
    }
    } //---根据索引文本定位列表框的位置
    function locateIndexText(sInputText,oDatasource)
    {
    var i;
    for(i=0;i<arrIndex.length;i++)
    {
    if(arrIndex[i].substring(0,sInputText.length) == sInputText)
    {
    oDatasource.selectedIndex = i;
    break;
    }
    }
    } </SCRIPT></PUBLIC:COMPONENT>
      

  5.   

    你这个是输入中文定位吧？！楼主的要求好像是：<option>中国</option>
    <option>米国</option>输入z 的时候跳到中国上吧。。
      

  6.   

    这有何难？？参考：http://www.blueidea.com/user/qswh/gb2312.html汉字在编码的时候就是按照拼音顺序编的，如果你对区位码有一些了解应该知道这方面的知识。不知道也没关系，我给你一个汉字内码与声母的对照表：    $B0A1..$B0C4 :  'A';
        $B0C5..$B2C0 :  'B';
        $B2C1..$B4ED :  'C';
        $B4EE..$B6E9 :  'D';
        $B6EA..$B7A1 :  'E';
        $B7A2..$B8C0 :  'F';
        $B8C1..$B9FD :  'G';
        $B9FE..$BBF6 :  'H';
        $BBF7..$BFA5 :  'J';
        $BFA6..$C0AB :  'K';
        $C0AC..$C2E7 :  'L';
        $C2E8..$C4C2 :  'M';
        $C4C3..$C5B5 :  'N';
        $C5B6..$C5BD :  'O';
        $C5BE..$C6D9 :  'P';
        $C6DA..$C8BA :  'Q';
        $C8BB..$C8F5 :  'R';
        $C8F6..$CBF9 :  'S';
        $CBFA..$CDD9 :  'T';
        $CDDA..$CEF3 :  'W';
        $CEF4..$D188 :  'X';
        $D1B9..$D4D0 :  'Y';
        $D4D1..$D7F9 :  'Z';
      

  7.   

    解决方法可以在  evonne_feng(evonne) 同学的基础上，把匹配函数改成中文->pinyin 的转换。
    参考:http://expert.csdn.net/Expert/TopicView1.asp?id=1442900
      

  8.   

    to dylanOK(迪伦)：
     对不起，我不是学生！其实这个功能已经可以满足用户在快速定位select框内容的要求，没有必要搞得那么复杂吧！