jQuery 绑定得失焦点时导致select不能选中

代码如下: [火狐下能用, IE下不能用]<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
.txt {
border: 1px solid #7F9DB9;
color: #000000;
font-size: 12px;
padding: 1px 1px 1px 3px;
}

.colorfocus {
background-color: #FFEEC2;
border: 1px double #4B4B6F;
color: #000000;
font-size: 12px;
padding-left: 3px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<SCRIPT>
$(function()
    {
var select_style="#DropDownList1";
if($.trim(select_style).length>1)
        {
            $(select_style).bind({
                mousedown:function(){
                    $(select_style).removeClass("colorfocus");
                    $(select_style).addClass("txt");
                    $(this).removeClass("txt");
                    $(this).addClass("colorfocus");
                },
                blur:function(){
                    $(select_style).removeClass("colorfocus");
                    $(select_style).addClass("txt");
                }    
            });
            $(select_style).addClass("txt");
        }
})
</SCRIPT>
</HEAD>
<BODY>
<select id="DropDownList1" name="DropDownList1" class="txt">
<option value="">==所有==</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</BODY>
</HTML>
[火狐下能用, IE下不能用], 换成得失焦点事件 在IE下select 必须要点两下才能出现下拉框

解决方案 »

  1.   

     $(select_style).bind({
                    mousedown:function(){改为 $(select_style).live({
                    mousedown:function(){
      

  2.   

     $(select_style).live({
                    mousedown:function(){
      

  3.   


    live( type, fn )
    jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。
    目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 
    还不支持 blur, focus, mouseenter, mouseleave, change, submit 
      

  4.   

    去掉$(select_style).removeClass("colorfocus");这句话试试
      

  5.   

    因为最初没有classname，ie没法解释这句话，然后就会出现错误。。
      

  6.   

    live 下IE是可以选中的.不过样式就没了,你可以试试 9楼说的是对的 mousedown中的去掉就可以了 
      

  7.   

    因为最初没有classname，ie没法解释这句话，然后就会出现错误。。
     <select id="DropDownList1" name="DropDownList1" class="txt"> 这里木有这个class
      

  8.   


    问题是我想要点击的时候 保证其他select 样式不为colorfocus 而为 txt
      

  9.   

    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
    <META http-equiv=Content-Type content="text/html; charset=gb2312">
    <style>
        .txt {
            border: 1px solid #7F9DB9;
            color: #000000;
            font-size: 12px;
            padding: 1px 1px 1px 3px;
        }
        
        .colorfocus {
            background-color: #FFEEC2;
            border: 1px double #4B4B6F;
            color: red;
            font-size: 12px;
            padding-left: 3px;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <SCRIPT>
    function show(){
        $('DropDownList1').addClass("txt");
    }     </SCRIPT>
    </HEAD>
    <BODY>
    <select id="DropDownList1" name="DropDownList1" class="txt" onmousedown="show()">
        <option value="">==所有==</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <script>
    se=document.getElementById("DropDownList1");
    for(i=0;i<se.options.length;i++){
    se.options[i].onfocus=function(){
    this.className="colorfocus";
    }
    se.options[i].onblur=function(){this.className="txt";}
    }
    </script></BODY>
    </HTML>