用javaScript实现两个复选框之间选项的移动和提交目标框中的选项

用javaScript实现两个复选框之间选项的移动和提交目标框中的选项

HTML的写法

view plain
<select size="10" multiple="multiple" id="allChoices"><!--注意multiple属性--> 
         <option value="1">tom</option> 
         <option value="2">jim</option 
         <option value="3">kate</option> 
</select> 
<input type="button" value="添加" id="inbutton"/> 
<input type="button" value="移除" id="outbutton"/> 
<select size="10" multiple="multiple" id="target"></select> 
<div> 
    <input type="submit" class="button" value="保存"/> 
        <input type="hidden" id="selectedvalues" value=""/> 
<!--为了记录目前选中的值，每次移动都会触发隐藏域 值的改变--> 
</div> 


实现复选框之间选项的移动

思路：当点击添加时，会触发对第一个复选框中选中状态的option循环，依次添加到另一个复选框中，点击移除时同理

view plain
$(document).ready(function(){ 
    $("#inbutton").click(function(){ 
        $("#allChoices option:selected").each(function(){ 
            $("#target").append($(this)); 
        }); 
    }); 
    $("#outbutton").click(function(){ 
        $("#target option:selected").each(function(){ 
            $("#allChoices").append($(this)); 
        }); 
    }); 
}); 


那么如何将选中的option的诸值向后台传递呢？

个人认为有两种思路：

①用隐藏域监听移动的操作，最后提交隐藏域的值

view plain
$(document).ready(function(){ 
     
         
         
        $("#inbutton").click(function(){ 
            $("#allChoices option:selected").each(function(){ 
                $("#hiddenUser").val($("#hiddenUser").val()+","+$(this).val()); 
                $("#selectuser").append($(this)); 
            }); 
             
            var v = $("#hiddenUser").val(); 
            if(v.indexOf(',')==0) { 
                v=v.substring(1,v.length); 
            } 
            $("#hiddenUser").val(v);//获得的结果形如1,2,3 
             
        }); 
         
        $("#outbutton").click(function(){ 
            $("#selectuser option:selected").each(function(){ 
                $("#alluser").append($(this)); 
            }); 
             
            $("#hiddenUser").val(""); 
            $("#selectuser option").each(function(){ 
                $("#hiddenUser").val($("#hiddenUser").val()+","+$(this).val()); 
            }); 
             
            var v = $("#hiddenUser").val(); 
            if(v.indexOf(',')==0) { 
                v=v.substring(1,v.length); 
            } 
            $("#hiddenUser").val(v); 
             
        }); 
         
         
    }); 


②不管中间的操作过程，只是在提交时获取目标框中的各option的值

view plain
$("#selectuser option").each(function(){ 
    $("#hiddenUser").val($("#hiddenUser").val()+","+$(this).val()); 
});