首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery操作两个select互相传值

2012-11-01 
jquery操作两个select相互传值$(document).ready(function(){$(#addto).click(function(){var $options

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">添加&gt;&gt;</button><br/><br/><button type="button" id="remove">&lt;&lt;移除</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">全部添加&gt;&gt;</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="removeAll">&lt;&lt;全部移除</button></div>

热点排行