根据多选按钮动态添加select中的value值！


   比如说，   有多个多选按钮，一个select下拉框。
 
   当勾选了多选框，多选框的值将动态添加到select下拉框中，   当不勾选此多选框了，select下拉框中的对应值也将同时被删除。

解决方案 »

  1.   


    <!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=utf-8" />
    <title>ajax</title>
    <script src="jquery-1.3.2.js"></script>
    <script>
    $(document).ready(function(){
     $("input[type=checkbox]").change(function(){
      var value = $(this).val();
        if($(this).attr("checked")== true){
         $("#test").append("<option>"+value+"</option>");
      }else{
        $("#test option").each(function(){
       if($(this).text()== value){
       $(this).remove();
     }
     });
      }
     });
    });
    </script>
    </head>
    <body>
    <select id="test">

    </select>
    <input type="checkbox" value="1" />1
    <input type="checkbox" value="2" />2
    <input type="checkbox" value="3" />3
    </body>
    </html>
    jquery的
      

  2.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script>
    function checkboxClick(o){
    var s = document.getElementById("test");
    var options = s.options;
    var flag = false;
    for(var i=0;i<options.length;i++){
    if(options[i].value == o.value){
    s.remove(i);
    flag = true;
    break;
    }
    }
    if(!flag){
    s.add(new Option(o.value,o.value));
    }
    }
    </script>
    </head><body>
    <select id="test">
        
    </select>
    <input type="checkbox" onclick="checkboxClick(this)" value="1" />1
    <input type="checkbox" onclick="checkboxClick(this)" value="2" />2
    <input type="checkbox" onclick="checkboxClick(this)" value="3" />3
    </body></html>
      

  3.   

    但是页面里会有很多个checkbox,不能每个都加onclick="checkboxClick(this)"吧,也不能所有input都加,因为可能有别的input,如butten等！
      

  4.   

    <script>
    window.onload=function (){
        var sel = document.getElementById("sel1");
        var chk = document.getElementsByTagName("input");
        for(var i=0;i<chk.length;i++){
            if(chk[i].type=="checkbox")
            chk[i].onclick=function(){
                if(this.checked)sel.add(new Option(this.nextSibling.nodeValue,this.value));
                else
                    for(var j=0;j<sel.options.length;j++)
                        if(sel.options[j].value==this.value)sel.remove(j);
            }
        }
    }
    </script>
    <select id="sel1"></select>
    <input type="checkbox" value="1" />a
    <input type="checkbox" value="2" />b
    <input type="checkbox" value="3" />c