colddemon 发表于 2013-2-6 11:02:48

js写的双向选择器 案例（jsp页面,json获取数据）

1. 双向选择器，略有修改，效果见附件图，jsp页面：

<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.id+"'>"+data.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.id+"'>"+data.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>
页: [1]
查看完整版本: js写的双向选择器 案例（jsp页面,json获取数据）