实现能从下拉菜单里选择,也能手工输入,关键还要能选择下拉的多项,该如何实现?

<select multiple>
本来就是可以用shift来支持多选的

解决方案 »

  1.   

    现给你一个测试版: http://expert.csdn.net/Expert/TopicView1.asp?id=2143373
    正式版还没有做完, 不过在IE6里这个测试版也可以用了.
      

  2.   

    可输入的select    flylyke（转贴）  
      
    关键字     select 
      
    出处     http://51js.1000box.net 
      
    做了一点小修改，希望对大家有用！！<html>
    <head>
    <style>
    <!--
    .cls1 { position:absolute; left:250px; top:89px; width:216px; height:72px; z-index:1; }
    .cls2 { position:absolute; left:250px; top:89px; width:95px; height:18px; z-index:2 }
    input { font-size: 12px; padding-top: 2px; padding-left: 2px;width:127;}
    //-->
    </style>
    </head>
    <script>
    <!--
    function addOption(pos){ if(event.keyCode==13)
     {
      var select_obj = document.getElementById("myselect");
      var text_value   = document.getElementById("test").value;  if (select_obj.length)
      {
       for (var i=0;i<select_obj.length;i++)
       {
        // 如果已经存在，不添加，直接退出
        if (select_obj.options[i].text==text_value)
         alert("选项已存在，请重新输入");
       }
      }
      var the_option= new Option(text_value,text_value);
      
      select_obj.add(the_option);  select_obj.selectedIndex = select_obj.options.length-1
     }  
     
    }
    //-->
    </script>
    <div class="cls1" style="clip: rect(3 280 21 110)"> 
      <select name="myselect" style="width:127" onchange="document.getElementById('test').value=this.value">
      </select>
    </div>
    <div class="cls2">
    <input type="text" name="test" onkeydown="addOption()" size="20" style="width: 127; height: 23">
    </div></body>
    </html>
      

  3.   

    xishanlang2001(西山狼2000) 老兄贴的代码确实是简洁,用起来感觉也还行,不过这都是用绝对坐标在定位的,这在实用过程中会有不少麻烦的吧
      

  4.   

    同时选的话，用select怕是不行了。
    不过你的要求这么多，建议不要用select,可以自己建立一个select,方法:建一个layer,放一个text和一个select和一组checkbox,再根据你的需要设定某个组件的显示，即可.
      

  5.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta name="Author" content="阿信,fason">
    <meta name="KeyWords" content="下拉框,输入,阿信,fason">
    <title>漂亮下拉框</title>
    <style>
    .selectBox{border:1px solid #993300;height:20px;}
    .editBox{border:0px;width:100px;cursor:default;width:100%;height:19px;padding-top:2px;margin:1px}
    .dropdownbutton{font-size:12px;font-family:webdings;color:#CCFF66;height:20px;background-color:#993300;border:1px solid #993300;padding:0 2;margin:1px;cursor:default}
    .selectContent{position:absolute;border:1px solid #993300;visibility:hidden;z-index:1000;background-color:#FFFFFF}
    .selectContent tr{height:20px;cursor:default}
    .selectContent td{font-size:12px;font-family:Vendana;padding:2 3}
    .OnFocus{color:#FFFFFF;background-color:#993300}
    </style>
    <script language="javascript">
    var CoolSelect=[]
    var CurrentTR=null
    function MouseOver(trObj){
    if(!CurrentTR)CurrentTR=trObj
    CurrentTR.className=""
    trObj.className="OnFocus"
    CurrentTR=trObj;
    }function ButtonOver(BtnObj){
    BtnObj.style.backgroundColor='#cc3300'
    }
    function ButtonOut(BtnObj){
    BtnObj.style.backgroundColor='#993300'
    }
    function MouseClick(Index,trObj){
    with(GetObj(CoolSelect[Index][1])){
    value=trObj.innerText;
    style.backgroundColor='#993300'
    style.color='#FFFFFF'
    focus()
    }
    DropDown(Index)
    }function GoURL(trObj){
    var url=trObj.getAttribute("url")
    if(url&&url!="")window.open(url)
    }function BoxBlur(InputBox){
    with(InputBox.style){backgroundColor="";color=''}
    }function DropDown(Index){
    event.cancelBubble=true
    ContainerReset(Index)
    var show=GetObj(CoolSelect[Index][2]).style.visibility=='visible'
    GetObj(CoolSelect[Index][2]).style.visibility=show?'hidden':'visible'
    setPosition(Index)
    }function document::onclick(){
    for(i=0;i<CoolSelect.length;i++){
    GetObj(CoolSelect[i][2]).style.visibility='hidden'
    with(GetObj(CoolSelect[i][2]))for(j=0;j<rows.length;j++)rows[j].style.display=""
    }
    }function window::onresize(){
    for(i=0;i<CoolSelect.length;i++)setPosition(i)
    }function showTip(Index){
    var inputbox=GetObj(CoolSelect[Index][1])
    var container=GetObj(CoolSelect[Index][2])
    var num=0
    container.style.visibility="visible"
    for(i=0;i<container.rows.length;i++){
    if(container.rows[i].cells[0].innerText.indexOf(inputbox.value)!=0)container.rows[i].style.display="none"
    else {container.rows[i].style.display="";num++}
    }
    if(num==0)container.style.visibility='hidden'
    }function ContainerReset(Index){
    var container=GetObj(CoolSelect[Index][2])
    for(i=0;i<container.rows.length;i++)container.rows[i].style.display=""
    if(CurrentTR)CurrentTR.className=""
    }function setPosition(Index){
    var s=GetObj(CoolSelect[Index][0])
    var container=GetObj(CoolSelect[Index][2])
    var l=s.offsetLeft;
    var t=s.offsetTop;
    while(s=s.offsetParent){l+=s.offsetLeft;t+=s.offsetTop}
    with(container.style){left=l+1;top=t+GetObj(CoolSelect[Index][0]).offsetHeight}
    }function Init(){
    CoolSelect[0]=["ConTainer1","txt1","select1"]
    CoolSelect[1]=["ConTainer2","txt2","select2"]
    for(i=0;i<CoolSelect.length;i++){
    var s=GetObj(CoolSelect[i][0])
    var container=GetObj(CoolSelect[i][2])
    container.style.width=s.offsetWidth>container.offsetWidth?s.offsetWidth:container.offsetWidth
    setPosition(i)
    }
    }
    function GetObj(id){return document.getElementById(id)}
    </script>
    </head><body onload="Init()"><div align="center">
    <table style="width:250;border:2px solid groove;font-size:12px" border=1 cellspacing=0 cellpadding=0>
    <tr bgcolor="green" style="font-weight:bold;color:#FFFFFF">
    <td>输入，提示功能示例</td><td>菜单跳转示例</td>
    </tr>
      <tr>
        <td>
    <table id="Container1" class="selectBox" border="0" width=100 cellspacing=0 cellpadding=0>
      <tr>
        <td><input name="txt1" value=" 请选择 " class="editBox" onblur="BoxBlur(this)" onclick="DropDown(0)" onkeyup="showTip(0)"></td>
        <td width="1"><span class="dropdownbutton" onmouseover="ButtonOver(this)" onmouseout="ButtonOut(this)" onclick="DropDown(0)">6</span></td>
      </tr>
    </table>
        </td>
        <td>
    <table id="Container2" class="selectBox" border="0" cellspacing=0 cellpadding=0>
      <tr>
        <td><input name="txt2" readOnly=true value=" 请选择 " class="editBox" onblur="BoxBlur(this)" onclick="DropDown(1)" onkeyup="showTip(1)"></td>
        <td width="1"><span class="dropdownbutton" onmouseover="ButtonOver(this)" onmouseout="ButtonOut(this)" onclick="DropDown(1)">6</span></td>
      </tr>
    </table>
        </td>
      </tr>
    </table>
    </div>
    <table id="select1" class="selectContent" cellspacing=0 cellpadding=0>
      <tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:Andy">
        <td>一起走过的日子</td>
      </tr>
      <tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:Andy">
        <td>你是我的温柔</td>
      </tr>
      <tr onmouseover="MouseOver(this)" onclick="MouseClick(0,this)" title="作者:Andy">
        <td>你是我的女人</td>
      </tr>
    </table>
    <table id="select2" class="selectContent" cellspacing=0 cellpadding=0>
      <tr onmouseover="MouseOver(this)" onclick="MouseClick(1,this);GoURL(this)" url="http://expert.csdn.net/expert/forum.asp">
        <td>CSDN论坛</td>
      </tr>
      <tr onmouseover="MouseOver(this)" onclick="MouseClick(1,this);GoURL(this)" url="http://msdn.microsoft.com/library/">
        <td>MSDN参考</td>
      </tr>
      <tr onmouseover="MouseOver(this)" onclick="MouseClick(1,this);GoURL(this)" url="http://www.iecn.net">
        <td>IECN论坛</td>
      </tr>
    </table>
    </body>
    </html>
      

  6.   

    多谢各位老兄了,现在支持选择和输入的已经找到了几种代码了.但要支持多选的看来不好看办了.
    我想干脆就弄个多行的select算了,那样就可以让客户选多个了.
    可我自己都觉得这样做有点矛盾,如果这样在多行的select里面多选的话,那自己手工输入的都没意义了啊,而且一用多行的话,那种既手工输入又选择的效果都不知怎么弄了.这个要求是我们老总提出来的,说一定要实现,各位老兄帮忙想想,有没有别的方法实现他的这个意思了?(我想顶上一行放一个text,下面放一个多行的select,这样,客户他想输就输,不想输就选择,可这样硬是要多了一个组件了)