zoukankan      html  css  js  c++  java
  • select多选左移右移的实现

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>左移右移的实现</title> 
    <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    </head>
    <script type="text/javascript">
    	$().ready(function() {
    		//添加一个
    		$("#add").click(function() {
    			$("#second").append($("#first option:selected"));
    
    			//$("#second").append($("#first :selected"));
    
    			//$("#first :selected").appendTo("#second");
    
    		});
    
    		//添加全部
    		$("#add_all").click(function() {
    			$("#second").append($("option"));
    		});
    		//删除一个
    
    		$("#remove").click(function() {
    			$("#first").append($("#second option:selected"));
    		});
    		//删除全部
    
    		$("#remove_all").click(function() {
    			$("#first").append($("#second option"));
    		});
    
    	});
    </script>
    <body>
    	<div
    		style="border: 1px dashed #E6E6E6; margin: 150px 0px 0px 450px;  350px; height: 200px; background-color: #E6E6E6;">
    		<table width="285" height="169" border="0" align="left"
    			cellpadding="0" cellspacing="0" style="margin: 15px 0px 0px 15px;">
    			<tr>
    				<td width="126">
    					<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--> <select
    					name="first" size="10" multiple="multiple" class="td3" id="first">
    						<option value="选项1">选项1</option>
    						<option value="选项2">选项2</option>
    						<option value="选项3">选项3</option>
    						<option value="选项4">选项4</option>
    						<option value="选项5">选项5</option>
    						<option value="选项6">选项6</option>
    						<option value="选项7">选项7</option>
    						<option value="选项8">选项8</option>
    				</select>
    				</td>
    				<td width="69" valign="middle">
    					<input name="add" id="add" type="button" class="button" value="-->" /> 
    					<input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
    					<input name="remove" id="remove" type="button" class="button" value="&lt;--" /> 
    					<input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
    				</td>
    				<td width="127" align="left">
    					<select name="second" size="10" multiple="multiple" class="td3" id="second">
    						<option value="选项9">选项9</option>
    					</select>
    				</td>
    			</tr>
    		</table>
    	</div>
    </body>
    </html>

    原文出处:

    xingyuner2, select左移右移的实现, https://blog.csdn.net/xingyuner2/article/details/78408219

  • 相关阅读:
    python 类
    python sys模块
    python os模块(2)
    python re模块
    python 最小公倍数
    python 最大公约数
    python datetime模块
    python 给定n,返回n以内的斐波那契数列
    python time模块
    python os模块(1)
  • 原文地址:https://www.cnblogs.com/ryelqy/p/10104039.html
Copyright © 2011-2022 走看看