(Truly原创) 一个漂亮好用的模拟下拉框

(Truly原创) 一个漂亮好用的模拟下拉框

点击这里下载完整源代码

在Web开发中，为了追求界面上的美观，有时候我们需要改变一些控件的呈现外观，通常我们可以通过CSS很方便的达到所需效果，但是对于一些控件缺令Web开发人员非常伤脑筋，比如想要更改下拉框的边框或者下拉箭头的演示，用CSS就非常难实现，这时候只能靠程序代码对系统默认下拉框控件进行模拟，有很多模拟方式都可以达到这一目的，但是本文，笔者对众多方案进行深入研究和权衡后，提出一种性能卓越的解决方案：

请看实际效果：

Abc

请选择

第一项

Truly

Abc

请选择 第一项 Truly Abc
abc

根据索引值调整选中项：

根据value值调整选中项：

这个函数库的主要方法为
initSelect(id, width, height), 后面两个参数主要用于指定下拉框宽度和高度，可以省略。
setSelectByIndex(id, index)
setSelectByValue(id, value)

注1：使用时需要给页面的body增加onclick="HideSel(event);"以取消下拉框选择。

注2：有些方法是公用方法，请根据实际情况进行调整，比如gid函数。

如何使用：假设你的页面上面放置了DropDownLoad服务器控件或者是select控件，要达到模拟效果只需使用一行代码：

<script>initSelect('Demo_Select');</script>

而想要选中某个值只需要：

onclick="setSelectByIndex('Demo_Select', gid('ctrIndex').value);"

或者

onclick="setSelectByValue('Demo_Select', gid('ctrValue').value);"

非常的简单！

点击这里下载完整源代码（注：由于演示需要本页面内置的代码可能略有不同。）

演示文件使用了一个图片darrow.gif和一个select.css以及一个select.js文件。

select的核心代码如下：

/**//***********************************************************************
** Author:     Truly
** Web:        http://Truly.cnblogs.com
** LastEdit:    2007.1.16
** Desc:    模拟select控件，实现自定义下拉图片和自定义边框颜色
**            initSelect(id,width,height)进行初始化，
**            setSelectByIndex(id,index)进行某项的选中
**            setSelectByValue(id,value)进行某项的选中
**            body 的 onclick=HideSel(event),onload=initSelect('下拉框select的id'),兼容IE和FireFox
** Note:    注意修改<img src=''>中的下拉图片地址
***********************************************************************/
var imgPath = "http://www.cnblogs.com/images/cnblogs_com/Truly/82187/t_darrow.gif";
var blOut = true;
var nowOpenedSelectBox = null;
function gid(id){    return document.getElementById?document.getElementById(id):null;}
function initSelect(id, width, height)
{
    var sel = gid(id);
    var a = sel.options;
    var oTable,oTBody, oRow, oCell,oSelect;
    
    if(!gid('O' + id )) {
        var strWidth = "";
        if(width != null)    strWidth=width+"px";
        else strWidth = gid(id).offsetWidth + "px";
        
        var strWidth2 = parseInt(strWidth) - 22 + 'px';
        
        var arr = new Array(a.length);
        for (var i=0,j=a.length;i<j; i++)
        {
            arr[i] = "<tr><td nowrap title='" + a[i].text + "' value='" + a[i].value + "'>" + HtmlEncode(a[i].text) + "</td></tr>";
        }
        // 虽然用insertAdjacentElement可以获得更好的性能，但是由于如果用insertAdjacentElement势必多次使用innerHTML处理，因此就全局来看这里调用1次insertAdjacentElement，反而取得更好的效果。
        sel.insertAdjacentHTML("beforeBegin","<table border=0 cellpadding=0 cellspacing=0 width='" + strWidth + "'><tr><td><table width=\"100%\" cellpadding=0 cellspacing=0 border=0 class='sel_normal' onclick=\"showHide('O" + id + "')\" onmouseout=\"blOut = false;\">\
        <tr bgcolor=white>\
            <td style='padding-left:3px;padding-right:3px;' nowrap><input type=\"hidden\" name=\"C_O" + id + "\" id=\"C_O" + id + "\"><DIV class='fixedWidth' style='padding-top:3px;width:" + strWidth2 + "' id=\"S_O" + id + "\">下拉选项</DIV></td>\
            <td width=\"15\"><img src='" + imgPath + "' /></td>\
        </tr>\
        </table></td><tr><td><div id=\"O" + id + "\" class=\"select\" onselectstart=\"return false\" onmouseover=\"HoverOptions(event);\" onmouseout=\"OutOptions(event);\" onclick=\"ClickOptions(event, 'O" + id + "');\">\
            <table cellsapcing=\"0\" cellspadding=\"3\" border=\"0\" width=100%>\
            <tbody>" + arr.join('') + "</tbody>\
            </table>\
        </div></td></tr></tbody></table>");

    }
    else
    {
        oSelect = gid('O' + id );
        var arr = new Array(a.length);
        for (var i=0,j=a.length;i<j; i++)
        {
            arr[i] = "<tr><td nowrap title='" + a[i].text + "' value='" + a[i].value + "'>" + a[i].text + "</td></tr>";
        }
        oSelect.parentNode.innerHTML = "<div id=\"O" + id + "\" style=\"position:absolute;\" onselectstart=\"return false\" onmouseover=\"HoverOptions(event);\" onmouseout=\"OutOptions(event);\" onclick=\"ClickOptions(event, 'O" + id + "');\">\
            <table cellsapcing=\"0\" cellspadding=\"3\" border=\"0\" width=100%>\
            <tbody>" + arr.join('') + "</tbody>\
            </table></div>";
    }
    
    oSelect = gid("O"+id);
    
    sel.style.display='none';
    
    // 如果超过8项，下拉框出现滚动条
    if(a.length > 8)
    {
        oSelect.style.overflowY = 'scroll';
        oSelect.style.height = 182;
    }
    else
    {
        oSelect.style.overflowY = 'hidden';
        oSelect.style.height = null;
    }
    
    // 加载原始下拉框的选中项
    if(sel.selectedIndex > -1)
    {
        setSelectByIndex(id, sel.selectedIndex);
    }
    else if(sel.options.length > 0)
    {
        setSelectByIndex(id, 0);
    }

}

function showHide(id){

    HideSel();
    blOut = true;
    nowOpenedSelectBox = id;
    var sh={block:"none",none:"block"};
    if(gid(id).style.display=='') gid(id).style.display='none';
    gid(id).style.display=sh[gid(id).style.display];
}

function HideSel(event)
{
    if(!blOut && nowOpenedSelectBox && gid(nowOpenedSelectBox))
        gid(nowOpenedSelectBox).style.display = 'none';
}
function HoverOptions(event)
{
    blOut = true;
    var obj = event.srcElement ? event.srcElement : event.target;
    if(obj.tagName=="TD"){
        obj.className='option_hover';
    }
}
function OutOptions(event)
{
    blOut = false;
    var obj = event.srcElement ? event.srcElement : event.target;
    if(obj.tagName=="TD"){
        obj.className='option_out';
    } 
}
function ClickOptions(event, id)
{
    var obj = event.srcElement ? event.srcElement : event.target;
    if(obj.tagName=="TD"){
        showHide(obj.parentNode.parentNode.parentNode.parentNode.id);
        gid('S_'+id).innerHTML=obj.innerHTML;
        gid('C_'+id).value=obj.value;

        var sourceObj = gid(id.substr(1));
        sourceObj.selectedIndex = obj.parentNode.rowIndex;
        if (sourceObj.onchange) sourceObj.onchange();
    } 
}
// 根据指定索引选中下拉框
function setSelectByIndex(id,index)
{
    if(index <0) index = 0;
    gid(id).selectedIndex = index;
    gid('S_O'+id).innerHTML=gid(id).options[index].text;
    gid('C_O'+id).value=gid(id).value;
    
    gid(id).fireEvent('onchange');
}
// 根据指定值选中下拉框
function setSelectByValue(id, value) {
    setSelectByIndex(id, getIndex(id, value));
    gid(id).fireEvent('onchange');
}
function getIndex(id, value)
{
    var selectBox = gid(id)
    var arOptions = selectBox.options;
    var strCompare = new String(value).toLowerCase();
    var intCompareLen = strCompare.length;
    var i, j; 
 
    for (i = 0; i < arOptions.length; i++) {
        if (strCompare == arOptions[i].value.substring(0,intCompareLen).toLowerCase()) {  
            for(j = 0; j < arOptions.length; j++) 
                ; 
            return i;
            break;
            }
    }
}
// 隐藏和显示某项
function HideItem(id, index)
{
    gid("O" + id).childNodes[0].rows[index].style.display = 'none';    
}
function ShowItem(id, index)
{
    gid("O" + id).childNodes[0].rows[index].style.display = 'block';    
}
function HtmlEncode(text)
{
    var re = {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'};
    for (i in re) text = text.replace(new RegExp(i,'g'), re[i]);
    return text;
}