First is the effect show, compatible with Firefox, ie6+, Google did not test there
Java Background Data Preparation
List<jcclass> grouplist =kbtgroup.getgrouplist (); String UserGroup= Userconfig.get ("Groupdata"); if(Jcutil.isemptylist (grouplist) = =false) {Iterator<JCClass> Groupiter =Grouplist.iterator (); while(Groupiter.hasnext ()) {Jcclass Group=Groupiter.next (); if(Usergroup.indexof (group). Get ("Name")) >0) Groupiter.remove (); } request.setattribute ("UserGroup", UserGroup); } request.setattribute ("Grouplist", grouplist);
Front desk JS Code
<script language= "JavaScript" ><!-- $(function(){varGroupdatas = $ ("#groupDatas"). Val (). Split (";"); varSelobj = $ ("#userGroup"); for(vari=0;i<groupdatas.length-1;i++) {selobj.append ("<option value= '" +groupdatas[i]+ ">" +groupdatas[i]+ "</option>"); } });
functionGettruedata (selectid) {vardata = ""; varCount = $ ("#" +selectid+ "option"). length; for(vari=0;i<count;i++) {Data=data+$ ("#" +selectid). Get (0). options[i].text+ ";"; } returndata; }
functionDbclickdata (E,sourceid,reid) {vartext=$ (E). Val (); Reversedata (Text,sourceid,reid); }
functionclickreversebtn (Sourceid,reid) {varselopt = $ ("#" +sourceid+ "option:selected"); varText =$ (selopt). Val (); Reversedata (Text,sourceid,reid); }
functionReversedata (Text,sourceid,reid) {varselopt = $ ("#" +sourceid+ "option:selected"); Selopt.remove (); varSelobj = $ ("#" +ReID); Selobj.append ("<option value= '" +text+ ">" +text+ "</option>"); }
functionCleargroup () {varGroupdatas = Gettruedata (' UserGroup '). Split (";"); varSelobj = $ ("#groupList"); for(vari=0;i<groupdatas.length-1;i++) {selobj.append ("<option value= '" +groupdatas[i]+ ">" +groupdatas[i]+ "</option>"); } $("#userGroup"). empty (); }
functionSubmitpage () {varGroupdata = Gettruedata (' UserGroup ')); varQuerygroup = $ ("#queryGroup"). Is (": Checked"); $.ajax ({URL:' Save.do ', type: ' Post ', data:{Groupdata:groupdata,querygroup:querygroup}, DataType:' HTML ', cache:false, Global:false, Error:function() {alert ("Network Error!"); }, Success:function(msg) {if(msg!= "Success"){alert (msg); return; } } }); }</script>
JSP code
<Table> <TR> <TD> <SelectID= "Grouplist"size= "9"style= "width:180px;"ondblclick= "clickreversebtn (' grouplist ', ' usergroup ')"> <C:foreachItems= "${grouplist}"Varstatus= "I"var= "M"> <optionvalue= "${m.get (' Name ')}">${m.get (' Name ')}</option> </C:foreach> </Select> </TD> <TD> <inputtype= "button"value= ">>"onclick= "clickreversebtn (' grouplist ', ' usergroup ')" /> <BR/> <BR/> <BR/> <BR/> <inputtype= "button"value= "< <"onclick= "clickreversebtn (' usergroup ', ' grouplist ')" /> <BR/> <inputtype= "button"value= "Clear"onclick= "Cleargroup ()" /> </TD> <TD> <SelectID= "UserGroup"size= "9"style= "width:180px;"ondblclick= "clickreversebtn (' usergroup ', ' grouplist ')"></Select> </TD> </TR> </Table>
jquery implementation of select left and right column add removal