Preface preface

In the last few days, you can use a box to lay out the left and right columns in the project, and then save the right column to the right side of the


The following picture is the function of implementation, and let's look at how to implement it.

Implementation of modal box:

Look at the smaller, plus, another blog bootstrap display modal box.

Content on both sides of the move:

( js implementation ):

 <script type="text/javascript">


 $(function () {


 $('#add').click(function () {


 $('#select1 option:selected').appendTo('#select2');



 $('#remove').click(function () {

 $('#select2 option:selected').appendTo('#select1');



 $('#add_all').click(function () {


 $('#select1 option').appendTo('#select2');



 $('#remove_all').click(function () {

 $('#select2 option').appendTo('#select1');



 $('#select1').dblclick(function () {//绑定双击事件


 $("option:selected", this).appendTo('#select2');//追加给对方



 $('#select2').dblclick(function () {

 $("option:selected", this).appendTo('#select1');




Html code implementation

 <div style="margin-left:50px; margin-top:-250px;"> <span id="add">

 <input type="button" class="btn" value=">"/>


 <span id="add_all">

 <input type="button" class="btn" value=">>"/>

 </span> <br/>

 <span id="remove">

 <input type="button" class="btn" value="<"/>


 <span id="remove_all">

 <input type="button" class="btn" value="<<"/>

 </span> </div>

The left column receives data from the database

Front part

 <select multiple="multiple" id="select1" style="width:150px;height:200px; float:left;margin-top:10px; border:4px #A0A0A4 outset; padding:4px;"> 

 <asp:Repeater ID="repCategory" runat="server">


 <option><%# Eval("ownerName") %></option>



Background section

 protected void Page_Load(object sender, EventArgs e)


 if (!Page.IsPostBack)



 repCategory.DataSource = new BLL.userBll().GrouName();




More than one selected data moves to the right column, saving to the database

Reception reception

 <div style="margin-top:-250px; margin-left:300px" runat="server"> 

 <select id="select2" name="select2" multiple="multiple" style="width: 150px;height:200px; float:left;border:4px #A0A0A4 outset; padding:4px;"> 



<div style="margin-top:250px ;float:left"> 

 <asp:Button ID="loginbtn" runat="server" Text="保存" OnClick="btnSub_Click" UseSubmitBehavior="false"/>


Background data

 protected void btnSub_Click(object sender, EventArgs e)


 string ownerName = Request.Form["select2"];

 string Gname = Request.Form["Text1"];

 if (ownerName!= null && Gname!= null)


 BLL.userBll get = new BLL.userBll();


 string[] ownerName1 = ownerName.ToString().Split(',');

  for (int i = 0; i <ownerName1.Length; i++)


 get.AddOwnerToGroup(ownerName1[i], Gname);








Local refresh

Before you don't join the following two controls, either search or save, each refresh is a refresh of the page, not a local refresh, so you need to add the following two controls. Include the content that requires partial refresh.


share, experience problems, to solve problems.

Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs