请高手指教：<select>标签支持索引的代码？谢谢...

小弟想实现：<select>标签可以实现标签索引功能，比如我在文本框里输入：8 则会自动检索以数字8开头的编号，这样的功能。那位大哥有现成的代码，还请各位指教....谢谢....

解决方案 »

  1.   

    完全可以实现。提供思路，使用ajax异步或者类似extjs或者jquery等框架的方法。
    代码不写了
      

  2.   

    首先要明确<select>下拉选项是已知固定的还是从动态的。
    如果是已知固定的，直接用js控制就可以了。不用提交后台
    如果是动态的，一般选择ajax
      

  3.   

    我现在想实现的就是：<select>下拉框的数据已经列出来了，现在就是想实现的就是：输入其中一个数就能在所有数据列出要查找的数据。谢谢....
    有代码给小弟参考下最好...
    谢谢...
      

  4.   

    导入jquery.js，当然也可以直接用javascript做。
    css我在Google Chrome调试的，对其他浏览器自己去调吧！
    js 在Google Chrome和ie都调试通过。
    思路是这样的，
    样式：先做一个伪的可编辑的下拉框（用一个text放在select的上面，只露出旁边的小三角）
    脚本：给text加一个keyup的监听，如果值不为空则检索option的text属性与其左匹配
    如果空值则将所有option显示。
    这只是一个demo,具体情况自己做修改。或者是将要求写的更明确一点。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <script language="javascript" src="C:\Documents and Settings\wangguanquan\My Documents\jquery.js"></script>
    <style type="text/css">
    select {
    width:100px;
    }
    input {
    position: absolute;
            left: 8px;
            top: 10px;
            width:82px;
            height:20px;
            z-index:1;
    }
    div {display:none;}
    </style>
    </head><body>
    <select>
    <option value="a1">a1</option>
    <option value="a2">a2</option>
    <option value="a3">a3</option>
    <option value="b1">b1</option>
    <option value="b1">b2</option>
    <option value="c1">c1</option>
    <option value="c2">c2</option>
    <option value="c3">c3</option>
    <option value="c4">c4</option>
    </select>
    <input type="text">
    <div></div>
    <script language="javascript">
    // clone options to div
    $('select option').clone().prependTo('div');
    $('input').keyup(function(){
    // first, remove all options
    $('select option').remove();
    // second, search div>optons and  append result to select
    if ($(this).val() != '') {
    $('div option[text^=' +$(this).val()+ ']').clone().prependTo('select');
    } else {
    $('div option').clone().prependTo('select');
    }
    $('select option:first').attr('selected', true);
    });
    // change select and reset input value
    $('select').change(function(){
    $('input').val($('select option:selected').text());
    });
    </script>
    </body>
    </html>
      

  5.   

    别人现成的代码给你,也不一定适合你自己的项目,所以只能提供给你思路,你在做的过程中遇到解决不了的问题再贴出来,这样你就能学习很多的东西,思路如下
          当文本框的值方式改变调用onchage事件 用ajax去后台查出相对的数据,并让select下拉显示出来