输入框可以输入页可以选择、点选择js实现多选列表^_^

就是想在一个可以输入的输入框后加个选择，选择之后呢会有个菜单列表（列出可以选择的项）且是可以多选的。选择确定之后选择的多值都能传到输入框内。what??

解决方案 »

  1.   

    这个输入框可以自定义输入内容，但是为了方便呢想做个选择菜单列表每个选项呢有个复选框，可以多选选好确定之后
    选择的值就可以传到输入框。例如：在输入框中可以自定义输入设计师的名字，也可以点击选择有部分设计师的候选菜单
    而且是可以多选的，加入菜单列表中有，s1、s2、s3、s4、s5、s6.我选择s1、s2后 s1、s2就会显示在输入框内
    还不能明白吗 ？？可以看http://www.tobosu.com/ningbo/fabu.html就是在意向设计师的输入框后面再加个选择按钮，点选择有个选择菜单
    ，列出部分推荐的设计师供选择，而且是可以多选的，选的设计师要显示在前面的输入框内。
      

  2.   

    应该是这样的吧...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function selValue(){
    document.getElementById("divValue").style.display = "block";
    }
    function closeDiv(isSave){
    if(isSave){
    var result = [];
    var chk = document.getElementsByName("chk");
    for(var i=0; i<chk.length; i++){
    if(chk[i].checked)
    result.push(chk[i].value);
    }
    document.getElementById("txt").value = result.join(",");
    }
    document.getElementById("divValue").style.display = "none";
    }
    </script>
    </head><body>
    <div>
    测试: <input type="text" id="txt" name="txt" /> <a href="javascript:selValue();">选值</a>
        <div id="divValue" style="display:none;position:absolute; width:200px; height:130px; border:1px solid #006699; background:#F5F6FB; padding:5px; line-height:22px;">
         <input type="checkbox" id="chk1" name="chk" value="1" />1<br />
            <input type="checkbox" id="chk2" name="chk" value="2" />2<br />
            <input type="checkbox" id="chk3" name="chk" value="3" />3<br />
            <input type="checkbox" id="chk4" name="chk" value="4" />4<br />
            <input type="checkbox" id="chk5" name="chk" value="5" />5<br />
            <a href="javascript:closeDiv(true);">确定</a>  &nbsp;&nbsp;
            <a href="javascript:closeDiv(false)">取消</a>
        </div>
    </div>
    </body>
    </html>
      

  3.   

    Free_Wind22 谢谢哈 就是这种效果^_^
    等下给分哈
      

  4.   

    加个判断就可以了.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function selValue(){
    document.getElementById("divValue").style.display = "block";
    }
    function closeDiv(isSave){
    if(isSave){
    var result = [];
    var chk = document.getElementsByName("chk");
    for(var i=0; i<chk.length; i++){
    if(chk[i].checked)
    result.push(chk[i].value);
    }
    if(result.length > 3){
    alert("最多只能选3项!");
    return;
    }
    document.getElementById("txt").value = result.join(",");
    }
    document.getElementById("divValue").style.display = "none";
    }
    </script>
    </head><body>
    <div>
    测试: <input type="text" id="txt" name="txt" /> <a href="javascript:selValue();">选值</a>
        <div id="divValue" style="display:none;position:absolute; width:200px; height:130px; border:1px solid #006699; background:#F5F6FB; padding:5px; line-height:22px;">
         <input type="checkbox" id="chk1" name="chk" value="1" />1<br />
            <input type="checkbox" id="chk2" name="chk" value="2" />2<br />
            <input type="checkbox" id="chk3" name="chk" value="3" />3<br />
            <input type="checkbox" id="chk4" name="chk" value="4" />4<br />
            <input type="checkbox" id="chk5" name="chk" value="5" />5<br />
            <a href="javascript:closeDiv(true);">确定</a>  &nbsp;&nbsp;
            <a href="javascript:closeDiv(false)">取消</a>
        </div>
    </div>
    </body>
    </html>