javascript - 关于jQuery的 :contains选择器好像有个问题，但是不知怎么改正

Question

<select id="s1" multiple="multiple" size=10>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
</select>
<p id="bt">
<button id="bt1">>></button>
<button id="bt2">>>></button>
<button id="bt3"><<</button>
<button id="bt4"><<<</button>
</p>
<select id="s2" multiple="multiple" size=10></select>
下面是jQuery：

 $(function(){
        $("#bt1").click(function(){
    var $targ=$("#s1 option:selected");
    $("#s2 option:contains($targ.text())").remove();
    //$("#s2 option").has($targ).remove();
    $("#s2").append("<option>"+$targ.text()+"</option>")
    $targ.hide();
    return false;
})
$("#bt3").click(function(){
        var $targ=$("#s2 :selected");        
        $("#s1 option:containts($targ.text())").show();//问题好像在这里，选择有问题
        $targ.remove();
        return false;
        })    
})

问题是点击第三个按钮让右边已选的选项移到左边，但是右边所有的选项都移到左边了？？而且button按钮好像刷新了页面。我return false都不能阻止button的默认行为
下面是截图：

Answer 1

$("#bt3").click(function(){
        var $targ=$("#s2 option:selected");         //问题出现在这里，少了option
        $("#s1 option:containts($targ.text())").show();
        $targ.remove();
        //return false;   //不用return false，直接在你html代码里面将button添加type属性应该就不会有刷新问题了。<button type="button"></button>
        })    
})

Answer 2

:contains 选择器里接受的是文本，所以你传进去的文本是 "$targ.text()" 这个文本，它不会运算成你想要的值再去执行代码，所以代码改成这样就可以成功：

$("#s1 option:contains('" + $targ.text() + "')").show();

可是话说，你为什么要写这么复杂的选择器？如果只是把 option 自由在左右任意移动，直接用 append 就行啦，直接 append 是有移动功能的。