关于multiple select的 option display:none;

大喵哥 发布于 2014/03/14 11:18
阅读 1K+
收藏 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>角色分配</title>
 <style>
.showOption{
display: block;
}

.hideOption{
display: none;
}
</style>


<!-- 引入js文件 -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
	
		$(function(){
			//移到右边
			$('#add').bind('click', function() {
				//获取选中的选项,删除并追加给对方
				$('#select1 option:selected').appendTo('#select2');
			
			});
			//移到左边
			$('#remove').bind('click', function() {
				$('#select2 option:selected').appendTo('#select1');
			});
			//全部移到右边
			$('#add_all').bind('click', function() {
				if($("#unBindEnterpriseName").val().replace(/\s+/g, "").length > 0){
					//获取全部的选项,删除并追加给对方
					$('#select1').find("option[class='showOption']").appendTo('#select2');
				} else {
					$('#select1 option').appendTo('#select2');					
				}
				
			});
			//全部移到左边
			$('#remove_all').bind('click', function() {
				if($("#bindEnterpriseName").val().replace(/\s+/g, "").length > 0){
					//获取全部的选项,删除并追加给对方
					$('#select2').find("option[class='showOption']").appendTo('#select1');
				} else {
					$('#select2 option').appendTo('#select1');
				}
			
			});
			//双击选项
			$('#select1').bind('dblclick', function() { //绑定双击事件
				//获取全部的选项,删除并追加给对方
				$("option:selected", this).appendTo('#select2'); //追加给对方
			});
			//双击选项
			$('#select2').bind('dblclick', function() {
			}); 
					
			$("#unBindEnterpriseName").keyup(function(){
			  var options=$("#select1").find("option");
				var key=$(this).val();
				$.each(options, function(i, option){
					if(option.text.indexOf(key)>-1){
						$(option).attr("class", "showOption");
					} else {
						$(option).attr("class", "hideOption");
					}
				})
			});
			
			$("#bindEnterpriseName").keyup(function(){
			  var options=$("#select2").find("option");
				var key=$(this).val();
				$.each(options, function(i, option){
					if(option.text.indexOf(key)>-1){
						$(option).attr("class", "showOption");
					} else {
						$(option).attr("class", "hideOption");
					}
				})
			});
			
			
	});
	</script>
  </head>
  
  <body>
	<table style="width:800px;height:100%" border="0" cellpadding="5">
		<tbody>
			<tr>
				<td>
					待分配企业:<input id="unBindEnterpriseName" type="text">
							 &nbsp;
				</td>
				<td></td>
				<td>
					已分配企业:<input id="bindEnterpriseName" type="text">
							 &nbsp;
							
				</td>
			</tr>
			<tr>
				<td>
					<select id="select1" style="width: 371px; height: 280px;" multiple="multiple">
						<option value="111111">1111</option>
						<option value="123">2</option>
						<option value="11ws1231111">222112</option>
						<option value="1111aa23sa111">11211</option>
						<option value="1111x1qe123d1">131231</option>
						<option value="11111123d1">131xxx231</option>
						<option value="xxx">1312sdfqw31</option>
					</select>
				</td>
				<td align="center" width="5%">
					<button type="button" id="add" style="width: 30px;">&gt;</button> <br><br>
					<button type="button" id="add_all" style="width: 30px;">&gt;&gt;</button> <br><br> 
					<button type="button" id="remove" style="width: 30px;">&lt;</button> <br><br>
					<button type="button" id="remove_all" style="width: 30px;">&lt;&lt;</button> 
				</td>
				<td>
					<select  style="width: 344px; height: 280px;" multiple="multiple" id="select2"></select>
				</td>
			</tr>
		</tbody>
	</table>
  </body>
  </html>


上面的代码在Firefox下是可以执行的   select的option可以设置为display:none;  

但是这个属性在ie和chrome下是不支持的

你们谁有类似的代码的  来参考下

功能实现

1.左边搜索框 输入数据 查询出左边的select的options  点击>或者>> 把查询出来options的移动到右边

2.当清空搜索条件的时候 左边的显示剩下的options

3.右边跟左边一样

4.要支持IE

加载中
0
lkfoff
lkfoff

>或》时:clone()一下左边的option,然后append()到右边去,然后remove()左边的option;

<或《时相同原理。


返回顶部
顶部