demo 地址 : http://dailylist.sinaapp.com/html_select/demo.html
github :https://github.com/wangshaofei/html_select
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="html_select.css" />
<title>test html select in jquery extends</title>
</head>
<body>
<h2>模拟传统的html的select控件</h2>
<div>
<dl>
<dt>1、重新定义select控件 和下拉框的样式,跨浏览器样式不变。</dt>
<dd> chrome firefox ie8</dd>
<dt>2、提交表单时还是提交的select的值。</dt>
<dt>3、使用简单。</dt>
<dd><pre>$('#select的id').dropDown({
'class' : 自定义的样式的class,
'callback' : 回调函数
})</pre><dd>
</dl>
</div>
<div class="wrapdiv">
<table>
<tr>
<td>年龄:</td>
<td>
<select id="age" class="select input_text_city input_text">
</select>岁
</td>
</tr><tr>
<td>身高:</td>
<td>
<select id="height" class="select input_text_city input_text">
</select>cm
</td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="html_select.js"></script>
<script type="text/javascript">
$(function(){
// 填出年龄下拉框的值
for (var i = 24; i < 72; i++) {
var o = $('<option>');
o.attr('value',i).text(i).appendTo($('#age'));
};
// 填出身高下拉框的值
for (var i = 160; i < 190; i++) {
var o = $('<option>');
o.attr('value',i).text(i).appendTo($('#height'));
};
// 应用dropDown插件
$('#age').dropDown({
'class' : 'age', // 添加自定义样式
'callback' : function(){ // 添加回调函数
alert($(this).val());
}
});
$('#height').dropDown({
'class' : 'height',
'callback' : function(){
alert($(this).val());
}
});
})
</script>
</body>
</html>
js代码
/**
* 一个jquery的拓展。
* 这个拓展是用来需要美化html的select控件的html页面。
* 原理:1、用css将select的样式写好(定义class),
* 2、影藏select
* 3、创建div作为select的选择框并赋予select的样式,创建ul作为下拉框
* 4、添加事件
* 5、修改成需要的样式。
* 使用方法:
* 1、$('#select的id').dropDown({
* 'class' : 添加的class名称,
* 'callback' : 毁掉函数,
* })。
*/
//应用严格模式
'use strict';
// 添加jquery拓展
$.fn.extend({
// dropDown 方法
'dropDown': function(config) {
// src select控件对象
var src = $(this);
src.hide();
// 创建新的选择框
var d = $('<div>');
d.attr('id', 'dropDown_' + src.attr('id'));
d.addClass($(src).attr('class'));
// 设置默认值
d.text(src.find('option[value=' + src.val() + ']').text() !== '' ? src.find('option[value=' + src.val() + ']').text() : '请选择');
d.css({
'display': 'inline-block',
'cursor': 'pointer',
'line-height': src.height() + 'px',
'text-align': 'center',
'width': 'auto',
'padding': '0 30px 0 20px'
});
// 点击事件
d.click(function(e) {
// 防止事件穿透
var e = e || window.event;
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
// 隐藏其他select的下拉框
hideAll();
// 获得option
var os = $('#' + src.attr('id')).find('option');
// 如果option为空就返回
if (os.length <= 0) return false;
// 创建下拉框
var div = $('<div/>');
var div2 = $('<div/>');
div2.addClass('clearfix');
div.addClass('div_model');
if(config && config['class']){
div.addClass(config['class']);
}
var ul = $('<ul/>');
for (var i = 0; i < os.length; i++) {
var li = $('<li/>');
li.text($(os[i]).text());
li.attr('value', $(os[i]).val());
li.click(function(e) {
var e = e || window.event;
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
d.text($(this).text());
// 赋值原select控件
src.val($(this).attr('value'));
hideAll();
if (config && config.callback) {
// 绑定回调函数
config.callback.call(src);
}
});
ul.append(li);
}
ul.appendTo(div2);
div2.appendTo(div)
// 弹出框定位
div.css({
'top': e.pageY,
'left': e.pageX
});
div.appendTo($('body'));
});
src.after(d);
$('body').click(function() {
$('.div_model').remove();
});
function hideAll() {
$('.div_model').remove();
}
}
});
css代码
ul,li{margin: 0px; padding: 0px;}
.hide{display: none;}
.wrapdiv {height:500px;width:300px; padding: 20px; border: 1px solid black;}
.div_model {position: absolute; border: 1px solid #ccc; padding: 5px; background: white;width: 300px;height: 200px;overflow: auto;}
.div_model ul ,.div_model ul li {list-style: none; margin: 0; padding: 0;}
.div_model ul li{float: left;padding: 1px 5px;margin: 1px; cursor: pointer;}
.div_model ul li:hover{background: red; color: white;}
.input_text_city {width:86px; margin-right:12px;}
.select{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAMAAAArBzSwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTQzMzEyNjVDMjhGMTFFMkIxQjBFN0MyOTMyNTYzN0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTQzMzEyNjZDMjhGMTFFMkIxQjBFN0MyOTMyNTYzN0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NDMzMTI2M0MyOEYxMUUyQjFCMEU3QzI5MzI1NjM3RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1NDMzMTI2NEMyOEYxMUUyQjFCMEU3QzI5MzI1NjM3RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pgh6wScAAABFUExURXZ1c9bW1oqKirGvsPHx8Wtpar6+vq+vr4SEhHRzcfX08/7+/qinpdPS0I6Ni+Lh4Gtra2xqa/39/WxraWtqaP///7wS/CgAAAAXdFJOU/8A5kDmXgAAAEJJREFUeNosyFkCgCAMA1HcdwWS5v5HtWjn703qcikkkBeTl2yYQJB91WcdtxPbaGHtycf1s9ke8Aw2y+a1BvUKMAArlgaEjk4vogAAAABJRU5ErkJggg==) no-repeat right center;}
.input_text{border:1px solid #cccccc;height:32px;width:190px;}
/* 清楚浮动 */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/* 年龄 */
.div_model.age {border-radius: 10px; padding: 10px;width: 297px;height: 178px;height: 180px\9;}
.div_model.age div {border-top: 1px #ccc solid;border-left: 1px #ccc solid;}
.div_model.age li {border-right:1px #ccc solid; border-bottom: 1px solid #ccc;padding: 5px 10px;margin: 0px;}
/* 身高 */
.div_model.height {border-radius: 10px; padding: 10px;width: 226px;height: 178px;height: 180px\9;}
.div_model.height div {border-top: 1px #ccc solid;border-left: 1px #ccc solid;}
.div_model.height li {border-right:1px #ccc solid; border-bottom: 1px solid #ccc;padding: 5px 10px;margin: 0px;}