option 不支持hide()以及filter()?


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>select1 appendTo select2</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/select1 appendTo select2.js"></script>
<link rel="stylesheet" type="text/css" href="css/select1 appendTo select2.css"/>
</head>
<body>
<div class="main">
<div class="left">
<span>输入关键字或者从列表中选择</span><br />
<input type="text" value="" class="keyWord" /><br />
<select class="select1" multiple>
<option>张三&nbsp;女&nbsp;前台组</option>
<option>李四&nbsp;男&nbsp;销售组</option>
<option>王五&nbsp;男&nbsp;销售组</option>
<option>赵六&nbsp;女&nbsp;市场部</option>
<option>周七&nbsp;男&nbsp;市场部</option>
<option>吴八&nbsp;男&nbsp;公关组</option>
<option>郑九&nbsp;女&nbsp;媒介组</option>
<option>冯十&nbsp;男&nbsp;资源组</option>
</select>
</div>
<div class="middle">
<button class="insert">添加>></button>
<button class="delete"><<删除</button>
</div>
<div class="right">
<span>选中的信息</span><br />
<select class="select2" multiple>

</select>
</div>

</div>
</body>
</html>
body
{
font-size:14px;
}
*
{
margin: 0;
padding: 0;
}
.main
{
margin: 0 auto;
margin-top: 50px;
width: 490px;
height: 300px;
border: 1px solid black;
}
.main div
{
float: left;
}
.left
{
width: 200px;
height: 300px;
margin:20px 0 0 20px;
}
.left input
{
margin-top: 10px;
margin-bottom: 10px;
width: 150px;
}
.middle
{
width:100px;
}
.insert
{
margin-top: 150px;
display: block;
}
.right
{
width: 170px;
height: 300px;
margin-top:20px;
}
.select1
{
width:150px;
height:200px;
}
.select2
{
width:150px;
height:228px;
margin-top: 10px;
}
$(function()
{
$(".keyWord").keyup(function()
{
$(".select1 option").hide().filter(":contains("+$(this).val()+")").show();//谷歌 IE不支持??
})

$(".insert").click(function()
{
var $userSelect=$(".select1 option:selected").clone();
$(".select2").append($userSelect);
})
$(".delete").click(function()
{
$(".select2 option:selected").remove();
})
$(".select1").dblclick(function()
{
$(".select2").append($("option:selected",this).clone());
})
})

解决方案 »

  1.   

    是的，option元素不支持display:none样式，过滤选项的效果还是得通过动态修改DOM结构来实现。
    另外一点，文件名中包含空格可不是什么好习惯。
    $(document).ready( function() {
    var opts = $(".select1 option").clone();
    $(".keyWord").keyup( function() {
    $(".select1").html(opts.filter(":contains('" + $(this).val() + "')").clone());
    });
    $(".insert").click(function() {
    var $userSelect = $(".select1 option:selected").clone();
    $(".select2").append($userSelect);
    });
    $(".delete").click(function() {
    $(".select2 option:selected").remove();
    });
    $(".select1").dblclick(function() {
    $(".select2").append($("option:selected", this).clone());
    });
    });
      

  2.   

    多谢提醒哈，另外都有哪些元素不支持jquery方法的某些呢，原则是什么呢
      

  3.   

    另外通过click事件clone()一次后，每点击一次克隆一次，怎么判断让事件只触发一次？
      

  4.   

    这种情况不应该直接绑定 ， 而应该用live， 
    比如： 
    $(function(){
        $(".insert").live("click", function(){
             alert("无论先加载还是后来添加的， 只要合符这个选择器就能运行！");
        });
    })