读书人

jquery操作两个select互相传值

发布时间: 2012-11-01 11:11:31 作者: rapoo

jquery操作两个select相互传值

$(document).ready(function(){           $('#addto').click(function(){               var $options = $('#select1 option:selected');//获取当前选中的项               var $remove = $options.remove();//删除下拉列表中选中的项               $remove.appendTo('#select2');//追加给对方           });                      $('#remove').click(function(){               var $removeOptions = $('#select2 option:selected');               $removeOptions.appendTo('#select1');//删除和追加可以用appendTo()直接完成           });                      $('#addAll').click(function(){               var $options = $('#select1 option');               $options.appendTo('#select2');           });                      $('#removeAll').click(function(){              var $options = $('#select2 option');               $options.appendTo('#select1');           });                      //双击事件           $('#select1').dblclick(function(){               //var $options = $('#select1 option:selected');               var $options = $('option:selected', this);//注意此处“option”与“:”之间的空格,有空格是不可以的               $options.appendTo('#select2');           });                      $('#select2').dblclick(function(){               $('#select2 option:selected').appendTo('#select1');           });                  });   

<div align="center"><table><tr><td><select multiple="multiple" id="select1"style="width: 100px; height: 100px;"><s:iterator value="fMap" id="f"><option value="${f.key}">${f.value}</option></s:iterator></select></td><td><button type="button" id="addto">添加>></button><br/><br/><button type="button" id="remove"><<移除</button></td><td><select multiple="multiple" id="select2" name="fids"style="width: 100px; height: 100px;"></select></td></tr></table></div><div align="center"><button type="button" id="addAll">全部添加>></button>         <button type="button" id="removeAll"><<全部移除</button></div>

读书人网 >Web前端

热点推荐