1. 双向选择器,略有修改,效果见附件图,jsp页面:
2. js代码:(在同一jsp页面)
双击可进行选择
用ajax获取待选项与已选项,已选择json返回格式为:
<table align="center" width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40%">
请选择<br/>
<select name="s1" size="15" multiple="multiple" id="s1" style="width:100%;">
</select>
</td>
<td width="20%" align="center">
<input type="button" name="add" id="add" value=" > " />
<input type="button" name="addall" id="addall" value=">> " />
<input type="button" name="remove" id="remove" value=" < " />
<input type="button" name="removeall" id="removeall" value="<< " />
</td>
<td width="40%">
已选择<br/>
<select name="s2" size="15" multiple="multiple" id="s2" style=" width:100%;"> </select>
</td>
</tr>
</table><br/><br/>
<div align="center">
<button id="updaterole" type="button">保存</button> <button type="button" id="close">关闭</button>
<!--
<input id="reset" type="reset" value="返回"/> -->
</div>
</form>
</div>
2. js代码:(在同一jsp页面)
双击可进行选择
用ajax获取待选项与已选项,已选择json返回格式为:
[{"name":"超级管理员","id":1,"description":"超级管理员","status":1,"createDatetime":"2011-12-08 15:20:15","createBy":1,"updateDatetime":"2011-12-08 15:20:19","updateBy":1}]
<script type="text/javascript">
$("#s1").html("");
$("#s2").html("");
//请选择角色
$.ajax({
url: "services/sys/sel-wait.do",
data: {"operid":id},
success: function(data) {
for(var i=0;i<data.length;i++){
$("#s1").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
}
},
error: function() {
}
});
//已选择角色
$.ajax({
url: "services/sys/sel-select.do",
data: {"operid":id},
success: function(data) {
for(var i=0;i<data.length;i++){
$("#s2").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
}
},
error: function() {
}
});
//$("#s1 option:first,#s2 option:first").attr("selected",true);
$("#s1").dblclick(function(){
$("option:selected",this).clone().appendTo("#s2");
$("option:selected",this).remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#s2").dblclick(function(){
$("option:selected",this).clone().appendTo("#s1");
$("option:selected",this).remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#add").click(function(){
$("#s1 option:selected").clone().appendTo("#s2");
$("#s1 option:selected").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#remove").click(function(){
$("#s2 option:selected").clone().appendTo("#s1");
$("#s2 option:selected").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#addall").click(function(){
$("#s1 option").clone().appendTo("#s2");
$("#s1 option").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});
$("#removeall").click(function(){
$("#s2 option").clone().appendTo("#s1");
$("#s2 option").remove();
//$("#s1 option:first,#s2 option:first").attr("selected",true);
});
</script>