javaScript模拟select下拉菜单，满足自定义select样式的需求+jquery实现

SELECT列表选择不支持样式设置，抽空用JS模拟了一个SELECT的样式，如下：

下拉菜单样式模拟，模拟下拉菜单

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单样式模拟，模拟下拉菜单</title>
<style type="text/css">
.boxa{ margin: 10px;}
#warper,#warper1{ margin:20px; position:relative; width:100px; float: left;}
#warper1{ width:202px;}
#warper ul,#warper1 ul{list-style:none; margin: 0; padding:0;}
#warper ul li,#warper1 ul li{line-height:20px; cursor:pointer; margin:1px 0; font-size:12px; text-indent:5px;}
.inputbox{width:128px; height:23px; line-height:23px; background: #ccc url(http://img.allinbuy.cn/WebResources/WSTL/Images/shopping/point/slt.gif) no-repeat; border:none;  font-size:12px; text-indent:5px;}
.inputbox1{width:202px; height:23px; line-height:23px; background: #ccc ; border:1px solid #333;  font-size:12px; text-indent:5px;}
.listcss{ display:none;position:absolute;width:126px;left:0;top:22px;border:1px solid #ccc; background:#fff; }
.listcss1{ display:none;position:absolute;width:202px;left:0;top:25px;border:1px solid #ccc; background:#fff; }
.hover{ background:blue; color:#fff;}
.hover1{ background:red; color:#fff;}

</style>
</head>
<body>
<form action="" method="get" name="fr">
<div class="boxa">
    <!-- 设置SELECT隐藏，基本布局是一个DIV下面包裹SELECT与DIV显示框，用UL无序列表模拟SELECT的下拉菜单
    需要传入DIV包裹层的id，select的ID，内层DIV的ID,UL要应用的样式，li的鼠标放上去样式-->
    <div 
});
selector2.createUl();
</script>
</body>
</html>

使用方法：

var selector1 = new VVG.Selector({ //新建实列
    selectId:"select", //selectID
    divId:"input", //内层DIV的ID
    warperId:"warper",//包裹层DIV的id
    css:"listcss",//ul下拉列表中UL的css
    licss:"hover"//li的HOVER样式
});
selector1.createUl();

然后自定义相关select模拟层的样式

Jquery 实现方法：

/*------------------------------------------------- +
 自定义SELECT表单样式
 使用方法：WellForm(id) //id 为表单元素form id
 +------------------------------------------------- */
function WellForm(id) {
    var $mySelects = $('#' + id).find('select');
    var n = $mySelects.length;
    var z = n;
    for (var i = 0; i < n; i++) {
        var $div = $("<div class='wellSelect'></div>");
        var $ul = $("<ul></ul>");
        var $em = $("<em></em>");
        $div.css('zIndex',z--);
        $div.click(
            function(){
                $('ul',this).show();
            }
        ).mouseleave(
            function(){
                $('ul',this).hide();
            }
        );
        $div.append($em);
        $div.append($ul);
        var $myOptions = $('option', $mySelects[i]);
        var k = $myOptions.length;
        for (var j = 0; j < k; j++) {
            var $myValue = $($myOptions[j]).val() ? $($myOptions[j]).val() : $($myOptions[j]).text();
            var $li = $("<li>" + $myValue + "</li>");
            $li.hover(function(){
                $(this).addClass('hover');
            },function(){
                $(this).removeClass('hover');
            });
            $li.click(function(){
                $(this).parent().prev().html($(this).text());
                var index = $(this).parent().find('li').index(this);
                $(this).parent().parent().next().get(0).selectedIndex = index;
                $(this).parent().parent().next().trigger("change");                                            
                $(this).parent().hide();            
                return false;
            });
            if ($myOptions[j].selected == true) {
                $em.html($myValue);
            }
            $ul.append($li);
            $ul.hide();
        }
        $($mySelects[i]).parent().find('label').after($div);
        $($mySelects[i]).hide();
    }
}
$(function () {
    WellForm('wellForm');
});

所需CSS：

/** wellSelect **/
.wellSelect{ position:relative; left:4px; background-position:right -325px; width:200px;height:24px; line-height:24px;  border:1px solid #ccc; display:inline-block; _display:inline; zoom:1;}
.wellSelect ul{ position:absolute;left:-1px; top:24px; background:#fff; width:200px; border:1px solid #ccc;}
.wellSelect ul li{ padding-left:5px; background:#fff; width:195px;}
.wellSelect ul li.hover{ background:#ccc;}

HTML结构：

<form id="wellForm">
        <div class="row">
            <label class="labeltext1">常付账单：</label>
            <select name="" class="select" onchange="alert('1111');">
                <option value="123354887">123354887</option>
                <option value="987552331">987552331</option>
                <option value="875121235">875121235</option>
                <option value="745215896">745215896</option>
            </select>
            <em class="addone"><a href="#">+新建一个缴费项目</a></em>
        </div>
        <div class="row">
            <label class="labeltext1">常付账单：</label>
            <select name="" class="select">
                <option value="123354887">123354887</option>
                <option value="987552331">987552331</option>
                <option value="875121235">875121235</option>
                <option value="745215896">745215896</option>
            </select>
        </div>
</form>

运行wellform函数后HTML代码：

<div class="row">
            <label class="labeltext1">常付账单：</label>
            <div class="wellSelect" style="z-index: 4; ">
               <em>123354887</em>
               <ul style="display: none; ">
                   <li>123354887</li>
                   <li>987552331</li>
                   <li>875121235</li>
                   <li>745215896</li>
               </ul>
            </div>
            <select name="" class="select" onchange="alert('1111');" style="display: none; ">
                <option value="123354887">123354887</option>
                <option value="987552331">987552331</option>
                <option value="875121235">875121235</option>
                <option value="745215896">745215896</option>
            </select>
            <em class="addone"><a href="#">+新建一个缴费项目</a></em>
        </div>