当前位置: 代码迷 >> Web前端 >> jquery操作两个select互相传值
  详细解决方案

jquery操作两个select互相传值

热度:86   发布时间:2012-11-01 11:11:31.0
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 class="centent" 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>

  相关解决方案