如何实现<select>选项的快速过滤？

比如：选项有 abc
             acd
             aaa
             bbb
             ddd
             ccc
比如输入一个条件b按查询后《select>>中显示
            abc
            bbb

解决方案 »

  1.   

    <select id="slt">
    <option>abc</option>
    <option>bbb</option>
    <option>ddd</option>
    <option>ccc</option>
    </select>
    <input type="button" onClick="dqmc_cx()"/>
    <div id="d"></div>
    <script language="jscript">
    function dqmc_cx() {
    var html="";
    for(var i=0;i<slt.length;i++) {
    if(slt.options[i].text.indexOf("b")>=0) html=html+"<br />"+slt.options[i].innerHTML;
    }
    d.innerHTML=html;
    }
    </script>
      

  2.   

    我想还写回到一个原《 select》中怎么实现？
      

  3.   

    <select id="slt">
    <option>abc</option>
    <option>bbb</option>
    <option>ddd</option>
    <option>ccc</option>
    </select>
    <input type="button" onClick="dqmc_cx()"/>
    <script language="jscript">
    function dqmc_cx() {
    var html="";
    for(var i=0;i<slt.length;i++) {
    if(slt.options[i].text.indexOf("b")>=0) html=html+"<option>"+slt.options[i].innerHTML++"</option>";
    }
    slt.innerHTML=html;
    }
    </script>
      

  4.   

    <html>
    <head>
    <script language="JavaScript">
    <!--
    var arrList=null;
    function init(){
    var dltObj=document.getElementById("dltShow");
    var opts=dltObj.options;
    var len=opts.length;
    arrList= new Array(len);
    for(var i=0;i<len;i++)
    arrList[i]=opts[i].value.toLowerCase();
    }
    function keyup(src){
    var strHTML="";
    var dltObj=document.getElementById("dltShow");
    var len=src.value.length;
    for(var i=0;i<arrList.length;i++){
    var reg=new RegExp(src.value);
    if(reg.test(arrList[i]))
    strHTML+='<option value="'+arrList[i]+'">'+arrList[i]+'</option>';
    }
    dltObj.outerHTML='<select id="dltShow" style="width:100% " multiple size="10">'+strHTML+'</select>';
    if(document.getElementById("dltShow").options.length==1){
    src.value=document.getElementById("dltShow").options[0].value;
    }
    }
    //-->
    </script>
    </head>
    <body onLoad="init();">
    <table cellpadding="0" cellspacing="0" border="0" width="300px">
    <tr>
    <td width="150"><input type="text" id="txtInput"  onpropertychange ="keyup(this)" style="width:100% "></td>
    <td width="150">
    <select id="dltShow" style="width:100% " multiple size="10">
    <option value="http://www.163.com">http://www.163.org</option>
    <option value="http://www.sina.com">http://www.sina.com</option>
    <option value="http://www.sohu.com">http://www.sohu.com</option>
    <option value="http://card.163.com">http://card.163.net</option>
    <option value="http://card.sina.com">http://card.sina.com</option>
    <option value="http://news.sohu.com">http://news.sohu.com</option>
    <option value="http://news.china.com">http://news.china.com</option>
    <option value="http://www.sohu.com">http://www.sohu.com</option>
    <option value="一见如故">一见如故</option>
    <option value="一见倾心">一见倾心</option>
    <option value="一面之缘">一面之缘</option>
    <option value="三心二意">三心二意</option>
    </select>
    </td>
    </tr>
    </table>
    </body>
    </html>