首页 / 脚本样式 / JavaScript / JQuery SELECT单选模拟jQuery.select.js

基于jQuery JavaScript Library v1.3.2 的单选模拟
（本文件是跟据 zhangjingwei 的Jquery Select（单选） 模拟插件 V1.3.4 修改而来的）
a. 修改的主要原因是，原来的zhangjingwei的模拟在显示方式上的问题。在跟文字交替出现时会出现错位。现将模拟DIV的display修改为inline方式。更自然的嵌入到文本行中。
b.在加载文件后自动转化样式名为"commonselect" 的select。简化调用
c.对select的onchange（）事件的响应。以及宽度获取的小调整
jquery.select.js
复制代码 代码如下:
/*
* jQuery.select.js
*/
jQuery.fn.sSelect = function（）{
    var selectId = $（this）.attr（"id"）;
    var selectZindex = $（this）.css（"z-index"）;
    var selectIndex = $（"#"+selectId+" > select > option"）.index（$（"#"+selectId+" > select > option:selected"）[0]）;
    $（"#"+selectId）.append（"<div class="dropselectbox"><h4></h4><span class="FixSelectBrowserSpan"></span><ul style="display:none" style="display:none"><li></li></ul></div>"）;
    $（"#"+selectId+" > div > h4"）.empty（）.append（$（"#"+selectId+" > select > option:selected"）.text（））;
    $（".dropselectbox"）.css（"display", "block"）;

    //取select的宽度 优先级 select样式中的宽度 - select自动的宽度 - 默认为60
    var selectcssWidth = $（"#"+selectId+"> select"）.css（"width"）;
    selectcssWidth = typeof（selectcssWidth） =="undefined" ？ 0 : parseInt（selectcssWidth.replace（"px",""）） +5 ;
    var selectWidth = selectcssWidth ？ selectcssWidth : （ $（"#"+selectId+"> select"）.width（） > 0 ？ $（"#"+selectId+"> select"）.width（） + 5 : 60）;
    $（"#"+selectId）.css（"margin-right",selectWidth）;    //修改偏移量
    $（"#"+selectId+" > div > h4"）.css（"width", selectWidth）; //将原select的宽度赋值给生成的select（并不是h4的总宽度）
    $（"#"+selectId+" > div > ul"）.css（"width",selectWidth）; //将h4的总宽度赋值给Ul
    $（"#"+selectId+" > select"）.hide（）;
    $（"#"+selectId+" > div"）.hover（function（）{
        $（"#"+selectId+" > div > h4"）.addClass（"over"）;
        $（"#"+selectId+" > div > span"）.addClass（"over"）;
    },function（）{
        $（"#"+selectId+" > div > h4"）.removeClass（"over"）;
        $（"#"+selectId+" > div > span"）.removeClass（"over"）;
    }）;
    $（"#"+selectId）
    .bind（"focus",function（）{
        __clearSelectMenu（）;
        $（"#"+selectId+" > div > h4"）.addClass（"over"）;
        $（"#"+selectId+" > div > span"）.addClass（"over"）;
    }）
    .bind（"click",function（e）{
        //$（"#value2"）.append（"点击："+selectIndex+"  <br>"）;
        if（$（"#"+selectId+" > div > ul"）.css（"display"） == "block"）{
            __clearSelectMenu（selectId）;
            return false;
        }else{
            if （$.browser.opera）{__clearSelectMenu（）;}
            $（"#"+selectId+" > div > h4"）.addClass（"current"）;
            $（"#"+selectId+" > div > span"）.addClass（"over"）.addClass（"current"）;
            $（"#"+selectId+" > div > ul"）.show（）;
            var selectZindex = $（this）.css（"z-index"）;
            if （$.browser.msie || $.browser.opera）{        
                $（".dropdown"）.removeClass（"overclass"）;        
            }
            $（"#"+selectId）.addClass（"overclass"）;
            __setSelectValue（selectId）;
            var windowspace = （$（window）.scrollTop（） + document.documentElement.clientHeight） - $（this）.offset（）.top;
            var ulspace = $（"#"+selectId+" > div > ul"）.outerHeight（true）;
            var windowspace2 = $（this）.offset（）.top - $（window）.scrollTop（） - ulspace;
            if （windowspace < ulspace && windowspace2 > 0） {
                $（"#"+selectId+" > div > ul"）.css（{top:-ulspace}）;
            }else{
                $（"#"+selectId+" > div > ul"）.css（{top:$（"#"+selectId+" > div > h4"）.outerHeight（true）}）;
            }
            selectIndex = $（"#"+selectId+" > div > ul > li"）.index（$（".selectedli"）[0]）;
            $（window）.scroll（function（）{
                var windowspace = （$（window）.scrollTop（） + document.documentElement.clientHeight） - $（"#"+selectId）.offset（）.top;
                var ulspace = $（"#"+selectId+" > div > ul"）.outerHeight（true）;
                if （windowspace < ulspace） {
                    $（"#"+selectId+" > div > ul"）.css（{top:-ulspace}）;
                }else{
                    $（"#"+selectId+" > div > ul"）.css（{top:$（"#"+selectId+" > div > h4"）.outerHeight（true）}）;
                }
            }）;
            //响应鼠标点击选择
            $（"#"+selectId+" > div > ul > li"）.click（function（e）{                                        
                    selectIndex = $（"#"+selectId+" > div > ul > li"）.index（this）;
                    //$（"#value2"）.append（"鼠标点击："+selectIndex+"  <br>"）;
                    $（"#"+selectId+"> select"）[0].selectedIndex = selectIndex;
                    $（"#"+selectId+" > div > h4"）.empty（）.append（$（"#"+selectId+" > select > option:selected"）.text（））;
                    __clearSelectMenu（selectId,selectZindex）;
                    e.stopPropagation（）;
                    e.cancelbubble = true;
                    //SELECT onchange 事件
                    $（"#"+selectId+"> select"）.change（）;
            }）
            .hover（
                 function（）{
                        $（"#"+selectId+" > div > ul > li"）.removeClass（"over"）;
                        $（this）.addClass（"over"）.addClass（"selectedli"）;
                        selectIndex = $（"#"+selectId+" > div > ul > li"）.index（this）;
                    },
                    function（）{
                        $（this）.removeClass（"over"）;
                    }
            ）;
            //End
        };
        e.stopPropagation（）;
    }）
    .bind（"mousewheel",function（）{
        //以后也许支持滚轮    
        /*$（"#"+selectId+" > div > ul > li"）.hover（
            function（）{
             return false;
            },
            function（）{
                return false;
            }
        ）;*/
    }）
    .bind（"dblclick", function（）{
        __clearSelectMenu（）;
        return false;
    }）
    .bind（"keydown",function（e）{
        //var hotkeys = e.keyCode;
        $（this）.bind（"keydown",function（e）{
            if （e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36）{
                return false;
            }
        }）;
        switch（e.keyCode）{ //设置为true可给定case范围
            case 9:
                return true;
                break;
            case 13:
                //enter
                //$（"#value2"）.append（"按回车收到的值："+selectIndex+"  <br>"）;
                __clearSelectMenu（）;
                break;
            case 27:
                //esc
                __clearSelectMenu（）;
                break;
            case 33:
                $（"#"+selectId+" > div > ul > li"）.removeClass（"over"）;
                selectIndex = 0;
                __keyDown（selectId,selectIndex）;
                break;
            case 34:
                $（"#"+selectId+" > div > ul > li"）.removeClass（"over"）;
                selectIndex = （$（"#"+selectId+" > select > option"）.length - 1）;
                __keyDown（selectId,selectIndex）;
                break;
            case 35:
                $（"#"+selectId+" > div > ul > li"）.removeClass（"over"）;
                selectIndex = （$（"#"+selectId+" > select > option"）.length - 1）;
                __keyDown（selectId,selectIndex）;
                break;
            case 36:
                $（"#"+selectId+" > div > ul > li"）.removeClass（"over"）;
                selectIndex = 0;
                __keyDown（selectId,selectIndex）;
                break;
            case 38:
                //up
                //$（"#value2"）.append（"原始值："+selectIndex+"  <br>"）;
                $（"#"+selectId+" > div > ul > li"）.removeClass（"over"）;
                if （selectIndex == 0）{
                    selectIndex = 0;
                }else{
                    selectIndex--;
                };
                //$（"#value2"）.append（"<span style="color:red;" style="color:red;">向上改变的aa值：</span>"+selectIndex+"  "）;
                __keyDown（selectId,selectIndex）;
                break;
            case 40:
                //down
                //$（"#value2"）.append（"传递过来的："+selectIndex+"  "）;
                $（"#"+selectId+" > div > ul > li"）.removeClass（"over"）;
                if （selectIndex == （$（"#"+selectId+" > select > option"）.length - 1））{
                    selectIndex = $（"#"+selectId+" > select > option"）.length - 1;
                }else{
                    selectIndex ++;
                };
                //$（"#value2"）.append（"<span style="color:blue;" style="color:blue;">向下改变的aa值：</span>"+selectIndex+"  "）;
                __keyDown（selectId,selectIndex）;
                break;
            /*case （（hotkeys > 47 && hotkeys < 59） || （hotkeys > 64 && hotkeys < 91） || （hotkeys > 96 && hotkeys < 123））:
                //首字幕查询预留接口
                //character = String.fromCharCode（hotkeys）.toLowerCase（）;
                return false;
                break;*/
            default:
                return false;
                break;
        };
    }）
    .bind（"blur",function（）{
        __clearSelectMenu（selectId,selectZindex）;
        return false;
    }）;
    //禁止选择
    $（".dropselectbox"）.bind（"selectstart",function（）{
            return false;
    }）;
};
function __clearSelectMenu（selectId,selectZindex）{
    //$（"#value2"）.append（"移除焦点："+selectIndex+"  <br>"）;
    $（".dropselectbox > ul"）.empty（）.hide（）;
    $（".dropselectbox > h4"）.removeClass（"over"）.removeClass（"current"）;
    $（".dropselectbox > span"）.removeClass（"over"）;
    $（"#"+selectId）.removeClass（"overclass"）;
}
function __setSelectValue（sID）{
    $（"#"+sID+" > div > ul"）.empty（）;
    $.each（$（"#"+sID+" > select > option"）, function（i）{
        $（"#"+sID+" > div > ul"）.append（"<li class="FixSelectBrowser">"+$（this）.text（）+"</li>"）;
    }）;
    $（"#"+sID+" > div > h4"）.empty（）.append（$（"#"+sID+" > select option:selected"）.text（））;
    $（"#"+sID+" > div > ul > li"）.eq（$（"#"+sID+"> select"）[0].selectedIndex）.addClass（"over"）.addClass（"selectedli"）;
}
function __keyDown（sID,selectIndex）{
    $（"#"+sID+"> select"）[0].selectedIndex = selectIndex;
    $（"#"+sID+" > div > ul > li:eq（"+selectIndex+"）"）.toggleClass（"over"）;
    $（"#"+sID+" > div > h4"）.empty（）.append（$（"#"+sID+" > select option:selected"）.text（））;
    //SELECT onchange 事件
    $（"#"+sID+"> select"）.change（）;
}
/* 自动调用 */
$（document）.ready（function（）{
    var s = new Array（）;
    var t = document.getElementsByTagName（"select"）;
    var j = 0;
    for（var i=0;i<t.length;i++）{
        if（t[i].className=="commonselect"）{
            s[j] = t[i];
            j++;
        }
    }
    if（j==0）return;
    var k = m = null;
    for（var i=0;i<s.length;i++）{
        k = s[i].parentNode;
        m = createDiv（k, i）;
        //s[i].replaceNode（m）;
        k.replaceChild（m,s[i]）
        m.appendChild（s[i]）;
        $（"#selectbox"+ i）.sSelect（）;
    }    
    function createDiv（p, i）{
        var div = document.createElement（"div"）;
        div.className = "dropdown";
        div.id = "selectbox" + i;
        div.innerHTML = " ";
        p.appendChild（div）;
        return div;    
    }
}）

HTML应用
复制代码 代码如下:
<！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>JQuery SELECT单选模拟</title>
<style type="text/css" bogus="1">
body,div,ul,h4,li {margin:0; padding:0; border:none; list-style:none; font-size:1;}
/*下拉列表select的commonselect样式 配合jquery.select插件 */
/* select style */
.dropdown {outline:none;z-index:1;display:inline-block;*display:inline; position:relative;}
.dropdown * {-moz-user-select:none;}
.dropselectbox{float:left; position:absolute}
.overclass{ z-index:999} /* 对于IE下层定位问题的修正样式 */
.dropdown h4{position:relative;cursor:default; text-indent:5px;text-align:left;display:block;overflow:visible; margin:0; height:20px;font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E;padding-left:0px;}
.dropdown h4.over{border-color:#369;}
.dropdown h4.current{border-color:#003;}
.dropdown div {display:none;position:absolute; left:0px; top:0px;}
.dropdown span {position:absolute;top:4px; right:3px; background:url（ico.gif） no-repeat center; width:16px; height:14px;}
.dropdown ul{position:absolute;display:none;border:1px solid #AAA; background:#333;color:#8E867B;}
.dropdown ul li{text-indent:5px;background:#333;height:19px;display:block;cursor:default;font:400 12px/19px Arial, Helvetica, sans-serif;text-align:left;}
.dropdown ul li.over{background:#369; color:#FFF;}
/* select style */
/* input style */
input.txt{border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E; height:18px;line-height:18px;}
</style>
<script type="text/javascript" src="jquery132.js" src="jquery132.js"></script>
<script type="text/javascript" src="jquery.select.js" src="jquery.select.js"></script>
</head>
<body style="background:none" style="background:none">
    <h1>Jquery Select（单选） 模拟插件 V1.3.4</h1>
    <form action="#" method="post" style="margin:10px;" style="margin:10px;">
    类型：
    <select name="type" class="commonselect" id="test">
                <option value=""></option>
                <option value="男">类型男</option>
                <option value="女">类型女</option>
        </select>
    性别:
     <select name="sex" style="width:100px" onchange="alert（this.value）;">
                <option value="">性别：</option>
                <option value="男">男</option>
                <option value="女">女</option>
        </select>
    <input type="text" size="8" class="txt" name="input">
    <input type="submit" id="postform" value="提交表单" style="border:1px solid #000; height:23px; margin-left:20px;" />
    </form>
</body>
</html>

可以参考这篇文档http://www.jb51.net/jiaoben/21397.html