jquery操作两个select相互传值

最新推荐文章于 2020-12-30 17:15:23 发布

qq654433750

最新推荐文章于 2020-12-30 17:15:23 发布

阅读量262

点赞数

文章标签： jQuery F# HTML ViewUI

本文链接：https://blog.csdn.net/qq654433750/article/details/83701460

版权


$(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">添加>></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>