关于multiple select的 option display:none;
<!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">
</td>
<td></td>
<td>
已分配企业：<input id="bindEnterpriseName" type="text">
</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;">></button> <br><br>
<button type="button" id="add_all" style="width: 30px;">>></button> <br><br>
<button type="button" id="remove" style="width: 30px;"><</button> <br><br>
<button type="button" id="remove_all" style="width: 30px;"><<</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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
>或》时：clone()一下左边的option，然后append()到右边去，然后remove()左边的option；
<或《时相同原理。