jquery plug-in implementation select dropdown box left and right selection _ Exchange content (Multiselect2side)

：

Use the jquery plugin---multiselect2side practices:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Analytical:
Head Header Import
JQUERY.MULTISELECT2SIDE.CSS file
Jquery-1.6.4.min.js jquery File
Jquery.multiselect2side.js file
* * Note: jquery files must be imported before Jquery.multiselect2side.js
Write a JS call multiselect2side method, parameter description
Search: "Searching for a selection:" parameter is to add a search area
Selectedposition: ' Right ', parameter is to add the drop-down box to the left to select the item location (required)
Moveoptions: Move option, can be used to sort the options, the actual application is not very meaningful, this is set to False
Labelsx and LABELDX are used to set the title of the left and right two list boxes, if not required to be set to empty
Maxselected: Maximum number of options, i.e. only a few items can be selected
Project 1 <link type= "text/css" href= "/public/css/jquery.multiselect2side.css" rel= "stylesheet"/>
2<script type= "Text/javascript" src= "/public/js/jquery-1.6.4.min.js" ></script>3<script type= "Text/javascript" src= "/public/js/jquery.multiselect2side.js" ></script>4<script type= "Text/javascript" >5$ (). Ready (function() {6$ (' #searchable ').Multiselect2side ({7Search: "Searching for a selection:",8Selectedposition: ' Right ',9Moveoptions:false,TenLABELSX: ' Awaiting the constituency ', OneLABELDX: ' Constituency ' A             });  -  -         }); the</script> - 
<form action= "/admin/system/add?ac=insert" id= "frm" method= "post" enctype= "Multipart/form-data" > -<select name= "searchable[]" id= ' searchable ' multiple= ' multiple ' > -<ifCondition= "!empty ($mod _user) "> +<option value= "0" > All </option> -<volist name= "Mod_user" id= "VO" > +<option value= "{$vo. UserID} ">{$vo.nickname}</option> A</volist> at<Else/> - User not found -</if> -</select>
</form>

Page get value using $ser =$_post['Searchable']; Gets the value of the array type option
Method Two: Use jquery to implement
<!--method Two, use jquery to implement--><style type= "Text/css" >#one{width:200px; height:180px; Float:left}#two{width:50px; height:180px; Float:left}#three{width:200px; height:180px; Float:left}. btn{width:50px; height:30px; margin-top:10px; cursor:pointer;}</style><script type= "Text/javascript" >//Drop- down box Exchange jquery import jquery file$(function(){    //move to the right$ (' #add '). Click (function() {    //get the selected option, delete and append to the other$ (' #select1 option:selected '). AppendTo (' #select2 ');    }); //move to the left$ (' #remove '). Click (function() {        $(' #select2 option:selected '). AppendTo (' #select1 ');    }); //move all to the right$ (' #add_all '). Click (function() {        //get all the options, delete and append to each other$ (' #select1 option '). AppendTo (' #select2 ');    }); //move all to the left$ (' #remove_all '). Click (function() {        $(' #select2 option '). AppendTo (' #select1 ');    }); //Double-click Options$ (' #select1 '). DblClick (function(){//bind double-click event//Get all options, delete and append to each other$ ("option:selected", this). AppendTo (' #select2 ');//append to each other    }); //Double-click Options$ (' #select2 '). DblClick (function(){       $("Option:selected", this). AppendTo (' #select1 '); });});</script>Select drop-down box content Exchange starts-<!--<table width= "align=" center "border=" 0 "Cellpadd ing= "0" cellspacing= "0"class= "Newconttab" > <tr>                                                                  <td><div> <div> <select multiple= "multiple" id= "Select1" style= "width:15 0px;height:200px; Float:left; Border:4px #A0A0A4 outset; padding:4px; "> <ifCondition= "!empty ($mod _user) "> <option value=" 0 "> All </option>                                                                    <volist name= "Mod_user" id= "VO" > <option value= "{$vo. UserID} ">{$vo.nickname}</option> </volist> <Else/>User not found </if>                                                                </select> </div> <div style= "float:left;padding-left:5px;" > <span id= "Add" > <input type= "button"class= "BTN" value= ">"/> </span><br/>                                                                  <span id= "Add_all" > <input type= "button"class= "BTN" value= ">>"/> </span> <br/>                                                                  <span id= "Remove" > <input type= "button"class= "BTN" value= "<"/> </span><br/>                                                                  <span id= "Remove_all" > <input type= "button"class= "BTN" value= "<<"/> </span> </div>                                                                  <div> <select multiple= "multiple" id= "Select2" style= "width:150px;height:200px; Float:lfet;border:4px #A0A0A4 outset; padding:4px; "                                                                > </select> </div> &LT;/DIV&GT;&LT;/TD&G                                                          T                                                        </tr> </table>  <!--Select drop-down box content Exchange ended--<input type= "hidden" Id= "Uidlist" name= "uidlist" value= ""/><script type= "TeXt/javascript "> $(function(){    $(' #sub '). Click (function(){       varuidlist=$ (' #searchable ').Val (); varmidlist=$ (' #select4 ').Val (); varcontent=$ (' #content ').Val (); varpushtime=$ (' #pushtime ').Val (); varimage=$ (' #image ').Val (); $(' #uidlist ').Val (uidlist); });});</script>
jquery plug-in implementation select dropdown box left and right selection _ Exchange content (Multiselect2side)