select下拉样式重置（html+css+jquery）

最新推荐文章于 2025-05-16 16:26:30 发布

原创最新推荐文章于 2025-05-16 16:26:30 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

HTML(一定要引用jquery才可以哦)

<!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>下拉重置</title>
<link href="css/main.css" rel="stylesheet">
</head>

<body>
	<form action="#" >	
        <div style="width:190px; display:inline-block">
            <select name="status" id="status" class="i-select">
                <option value="" selected>商品状态</option>
                <option value="1">上架</option>
                <option value="2">下架</option>
            </select>
        </div>
    	<input type="submit" value='提交表单'/>
    </form>
    <script src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="js/my.js"></script>
</body>
</html>

CSS

.form-select{position:relative;}
.i-select{display:none;}
.form-select .sel-edge{position: absolute;  right: 10px;  top: 50%;  margin-top: -3px;  cursor: pointer;  border-width: 6px;  border-top-color: #c2c2c2;  border-top-style: solid;  transition: all .3s;  -webkit-transition: all .3s;}
.form-selected .sel-edge{margin-top: -9px; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.sel-edge{display: inline-block; width: 0; height: 0; border-width: 6px; border-style: dashed;  border-color: transparent; overflow: hidden; vertical-align: middle;}
.sel-input{border-color: #e6e6e6;display: block; width: 100%; padding-left: 10px;}
.form-select .sel-input{ cursor: pointer;}
.sel-input{height: 38px; line-height:38px; border:1px solid #e6e6e6;  background-color: #fff;  border-radius: 2px;}
.sel-input:hover{border-color: #D2D2D2!important;}

.form-select.form-selected dl{display: block;}
.form-selectup dl{top: auto; bottom: 42px;}
.form-select dl{display: none; position: absolute; left: 0; top: 35px; padding: 5px 0; z-index: 899; min-width: 100%;  border: 1px solid #d2d2d2;  max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); box-sizing: border-box;}
.form-select dl dd{cursor: pointer; padding: 0 10px; line-height: 36px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; margin:0}
.form-select dl dd:hover{background-color: #f2f2f2;}
.form-select dl dd.select-tips{padding-left: 10px!important; color: #999;}
.form-select dl dd.select_checked{background-color: #5FB878; color: #fff;}

JS（my.js）

$().ready(function(e) {
	selectFun();
});
function selectFun(){	
	$(document).on("click",".select-title",function(e){
		$(".form-select").removeClass("form-selected");
		$(this).parent().toggleClass("form-selected");
	});		
	$(document).on("click",".form-select dl dd",function(){
		var classN  = $(this).attr("class");
		var val  = $(this).attr("data-val");
		var text  = $(this).text();
		var input = $(this).parent().prev(".select-title").find("input");
		var ind = $(this).index();
		if(val == ""){
			input.val("");
		}else{
			input.val(text);
		}
		$(this).addClass("select_checked").siblings().removeClass("select_checked");
		$(this).closest(".form-select").toggleClass("form-selected");
		//同步select的值
		$(this).parents(".form-select").prev().children("option").removeAttr("selected");
		$(this).parents(".form-select").prev().children("option").eq(ind).attr("selected","selected");
	});
	
	$(document).mouseup(function(e){
		var _con = $(".form-select");
		if(!_con.is(e.target) && _con.has(e.target).length === 0){
			$(".form-select").removeClass("form-selected");
		}
	});
	$(".i-select").each(function(index, element) {
		var opt = {};
		var selectOpt = []
		var checked_txt = "";
		var placeholder = "";
		
		$(this).children("option").each(function(index, element) {				
			opt[$(this).text()] = $(this).val();
			var text = $(this).text();				
			var value = $(this).val();
			var checked = false;
			
			if($(this).attr("selected")){
				checked = true;				
				if(value == ""){
					checked_txt = "";
				}else{
					checked_txt = text;	
				}
			}
			selectOpt.push(
				{
					text: text,
					value: value,
					selected: checked
				}
			)
			if(index==0){//获取placeholder文字
				placeholder = $(this).text();	
			}
		});
		//循环
		var optList = "";
		$.each(selectOpt, function(index, val) {
			if(index==0){
				optList =  optList +'<dd data-val="'+val.value+'" class="select-tips">'+val.text+'</dd>'
			}else{
				if(val.selected){
					optList =  optList +'<dd data-val="'+val.value+'" class="select_checked">'+val.text+'</dd>';
				}else{
					optList =  optList +'<dd data-val="'+val.value+'">'+val.text+'</dd>'
				}
			}
		});
		$(".i-select").parent().append('<div class="form-select">\
			  <div class="select-title">\
				  <input type="text" placeholder="'+placeholder+'" value="'+checked_txt+'" readonly="" class="sel-input">\
				  <i class="sel-edge"></i>\
			  </div>\
			  <dl>'+optList+'</dl>\
		  </div>');
	});
}