select样式美化，模拟select

 

<%@ page trimDirectiveWhitespaces="true" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8" buffer="none" %>
<%@ taglib uri="/tags/website" prefix="website" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/tags/website-function" prefix="fn" %>
<website:script src="js/jquery.js"/>

<select id="open_bank" name='open_bank'  class='select field'>
	<option value='中国人民银行'>中国人民银行</option>
	<option value='中国工商银行'>中国工商银行</option>
	<option value='中国农业银行'>中国农业银行</option>
	<option value='中国建设银行'>中国建设银行</option>
	<option value='中国银行'>中国银行</option>
	<option value='中国民生银行'>中国民生银行</option>
	<option value='中国光大银行'>中国光大银行</option>
</select>
<style>
.selectContainer{
	position:relative; 
	width: 64px;
	height:32px;
	_zoom:1; 
	z-index:1000; 
	border:1px solid #CCC;
	background: none;
	padding-left: 15px;
	font-size:12px;
	line-height:32px;
	float: left;
	
}  
.selectContainer .selectOption{
	line-height:32px; 
	height:32px; 
	white-space:nowrap; 
	overflow:hidden;
	border:none; 
	width:60px; 
	z-index:1000;
	display:inline-block;
	}  
.selectContainer .shows{
	width: 10px;
	height: 10px;
	position: absolute;
	right: 8px;
	top: 14px;
	background: url('skins/arrow.png') #fff no-repeat;
}  
.selectContainer ul{
	position:absolute; 
	width:80px; 
	top:25px; 
	left:-1px; 
	border-bottom:1px solid #CCC; 
	display:none;
	list-style:none;
	padding:0;
}  
.selectContainer ul li{
	text-align:center;
	border:1px solid #CCC; 
	border-bottom:1px solid #EEE; 
	border-top:none; 
	line-height:25px; 
	background:#FFF; 
	cursor:pointer}  
.selectContainer ul li:hover{background:#F5F5F5}  
  
.selectContainer ul.dis{display:block!important;}  
.selectContainer ul.undis{display:noneimportant;}  
.zIndex{z-index:10000!important}  
.selectContainer .gray{color:#DDD}  



</style>


<div class="selectContainer">  
        <span class="selectOption gray">请选择</span>  
        <ul class="selectMenu">  
            <li>江西省</li>  
            <li>广东省</li>  
            <li>江苏省</li>  
            <li>河北省</li>  
            <li>湖南省</li>  
        </ul>  
        <span class="shows"></span>  
 </div> 

<script>



(function($){  
	  
    jQuery.fn.select = function(options){  
        return this.each(function(){
            var $this = $(this);  
            var $shows = $this.find(".shows");  
            var $selectOption = $this.find(".selectOption");  
            var $el = $this.find("ul > li");  
                                      
            $this.click(function(e){  
                $(this).toggleClass("zIndex");  
                $(this).children("ul").toggleClass("dis");  
                e.stopPropagation();  
            });  
              
            $el.bind("click",function(){  
                var $this_ = $(this);  
                   
                $this.find("span").removeClass("gray");  
                $this_.parent().parent().find(".selectOption").text($this_.text());  
            });  
              
            $("body").bind("click",function(){  
                $this.removeClass("zIndex");  
                $this.find("ul").removeClass("dis");      
            })  
              
        //eahc End    
        });  
          
    }  
      
})(jQuery);   


	$(document).ready(function(){
		$(".selectContainer").select();  
	});
</script>