左右列表框内容选择控件

最新推荐文章于 2019-05-08 17:57:08 发布

gundumw100

最新推荐文章于 2019-05-08 17:57:08 发布

阅读量1.4k

点赞数 1

分类专栏： Java

本文链接：https://blog.csdn.net/gundumw100/article/details/69951950

版权

Java 专栏收录该内容

156 篇文章 1 订阅

订阅专栏

$("#right").click(function(){
			$("#selectB option:selected").attr("selected",false);
			$("#selectA option:selected").appendTo("#selectB");
		});
		$("#left").click(function(){
			$("#selectA option:selected").attr("selected",false);
			$("#selectB option:selected").appendTo("#selectA");
		});
		$("#rightAll").click(function(){
			$("#selectA option").appendTo("#selectB");
		});
		$("#leftAll").click(function(){
			$("#selectB option").appendTo("#selectA");
		});
		$("#selectA").dblclick(function(){
			$("#selectB option:selected").attr("selected",false);
			$("#selectA option:selected").appendTo("#selectB");
		});
		$("#selectB").dblclick(function(){
			$("#selectA option:selected").attr("selected",false);
			$("#selectB option:selected").appendTo("#selectA");
		});

<table id="tableA" width="400" border="0">
      <tr>
        <td width="179" rowspan="2"><div align="right">
          <select name="select" multiple="multiple" id="selectA"  style="width:100px;height:160px">
            <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>
        </div>
		</td>
        <td width="14"><button id="rightAll" >&gt;|</button><button id="right" >&gt;&gt;</button></td>
		
        <td width="193" rowspan="2">
			<div align="left">
			  <select name="select2" multiple="multiple" id="selectB"  style="width:100px;height:160px">
		      </select>
	        </div></td>
      </tr>
      <tr>
        <td><button id="left" >&lt;&lt;</button><br /><button id="leftAll" >|&lt;</button></td>
      </tr>
      
    </table>