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

[size=small]用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());
});
[/size]