<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
.mod_select{display: none;font-size:12px;font-family:'Trebuchet MS',Verdana, sans-serif;position:absolute;left:20%;top:10%;white-space:nowrap;}
.select_label{color:#000;float:left;line-height:16px;padding-right:4px;}
.select_box{margin:0;padding:0;background:#eee;border:solid 1px #ACBABD;border-radius:2px;position:relative;list-style-type:none;float:left;height:15px;}
.select_txt{padding:0;margin-top:1px;display:inline-block;text-indent:8px;width:100%;line-height:12px;height:12px;cursor:text;overflow:hidden;color:#000;}
.select_arrow{position:absolute;float:right;top:4px;right:4px;border-style:solid;border-width:6px 4px 0px 4px;border-color:#555 #eee #eee #eee;height:0;width:0;font-size:0}
.option{margin:0;padding:0;display:none;background:#eee;width:100%;border:solid 1px #ccc;position:absolute;top:14px;left:-1px;overflow-y:auto;}
.option li{margin:0;padding:0;display:block;height:14px;line-height:14px;text-align:left;text-indent: 8px;width:100%;color:#000;}
.option li.select_hover{background:#316AC5;color:#FFF;text-decoration:none;}
</style>
</head>
<body>
<div class="mod_select">
<span class="select_label">选择:</span>
<div class="select_box" tabindex="0">
<span class="select_txt">
<text>选择全部</text>
<strong class="select_arrow"></strong>
</span>
<ul class="option">
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 选中后填充文本框
write_seleted = function() {
var value = $(this).text();
$(this).parent().siblings(".select_txt").find("text").text(value);
$(this).parent().hide();
}
// 收起下拉列表
hide_options = function(event) {
var eo = $(event.target);
if (eo.attr("class")!="option" && !eo.parent(".option").length) {
$('.option').hide();
};
}
// 切换下拉列表的展开与收起
show_options = function(event) {
event.stopPropagation();
$(this).siblings('.option').toggle();
if ($(this).siblings('.option').is(":visible")) {
$(this).siblings('.option').find('li').mouseenter(function() {
$(this).siblings('.select_hover').removeClass('select_hover');
$(this).addClass('select_hover');
});
} else {
$(this).siblings('.option').unbind('mouseenter');
};
}
// 键盘按键事件
legend_select_key_down = function(event) {
if (event.which == 13) {
event.preventDefault();
if ($(this).find('.option').is(":visible")) {
$(this).find('.select_hover').click();
} else {
$(this).find('.select_txt').mousedown();
};
};
if ($(this).find('.option').is(":visible") && (event.which == 37 || event.which == 38)) {
event.preventDefault();
$(this).find('.select_hover').prev().mouseenter();
if ($(this).find('.select_hover').position().top < 0) {
$(this).find('.option').scrollTop($(this).find('.option').scrollTop() - 14);
};
};
if ($(this).find('.option').is(":visible") && (event.which == 39 || event.which == 40)) {
event.preventDefault();
$(this).find('.select_hover').next().mouseenter();
if ($(this).find('.select_hover').position().top > 383) {
$(this).find('.option').scrollTop($(this).find('.option').scrollTop() + 14);
};
};
}
// 求下拉列表合适的宽度
get_select_width = function(node, font_size) {
var options = node.find("li");
var string_length = 0;
$.each(options, function(index) {
var textContent = options[index].textContent;
// 处理中文长度
var textContent_length = textContent.replace(/[^\x00-\xff]/g,"01").length;
if (textContent_length > string_length) {string_length = textContent_length;};
});
if (string_length % 2 != 0) {string_length += 1;};
string_length = string_length * font_size / 2 + font_size / 12 * 8;
$(".mod_select").show();
node.show();
if (node[0].offsetHeight > node[0].clientHeight) {
string_length += 16; //如果下拉列表显示滚动条,加上滚动条宽度
};
node.hide();
$(".mod_select").hide();
return string_length;
}
resize_base_font_size = function(font_size) {
$(".mod_select")[0].style.fontSize = font_size + "px";
$(".select_label")[0].style.lineHeight = font_size + font_size / 3 + "px";
$(".select_label")[0].style.paddingRight = font_size/3 + "px";
$(".select_box")[0].style.height = font_size + font_size / 4 + "px";
$(".select_box")[0].style.borderWidth = font_size / 12 + "px";
$(".select_txt")[0].style.marginTop = font_size / 12 + "px";
$(".select_txt")[0].style.textIndent = font_size / 12 * 8 + "px";
$(".select_txt")[0].style.lineHeight = font_size + "px";
$(".select_txt")[0].style.height = font_size + "px";
$(".select_arrow")[0].style.top = font_size / 3 + "px";
$(".select_arrow")[0].style.right = font_size / 3 + "px";
$(".select_arrow")[0].style.borderTopWidth = font_size / 2 + "px";
$(".select_arrow")[0].style.borderRightWidth = font_size / 3 + "px";
$(".select_arrow")[0].style.borderLeftWidth = font_size / 3 + "px";
$(".option")[0].style.left = font_size / -12 + "px";
$(".option")[0].style.borderWidth = font_size / 12 + "px";
$(".option")[0].style.top = font_size + font_size / 6 + "px";
var select_width = get_select_width($(".option"), font_size);
$.each($(".option li"), function() {
$(this)[0].style.height = font_size + font_size / 6 + "px";
$(this)[0].style.borderRightWidth = 1 + "px";
$(this)[0].style.borderRightColor = "#ccc";
$(this)[0].style.borderRightStyle = "solid";
$(this)[0].style.width = select_width - 16 + "px";
$(this)[0].style.lineHeight = font_size + font_size / 6 + "px";
$(this)[0].style.textIndent = font_size / 12 * 8 + "px";
});
$(".select_box")[0].style.width = select_width + "px";
}
function init_select() {
var option = $(".option");
// 超出此高度显示滚动条
option[0].style.maxHeight = "400px";
// 添加选项
var first_optins = ['<li class="select_hover">选择全部</li>',
'<li>不选全部</li>',
'<li style="border-bottom:solid 1px #ACBABD;height:14px;padding-bottom:2px;">反选全部</li>',
'<li style="padding-top:2px;">总量</li>',
'<li>haohaohao.com</li>',
'<li>hehehehehehe.cn</li>',]
$.each(first_optins, function(index) {
option.append(first_optins[index]);
});
var i;
for (i = 0; i < 20; ++i) {
option.append("<li>" + i + ".com</li>");
};
// 根据字体大小调整下拉列表大小
var font_size = 24;
resize_base_font_size(font_size);
// 绑定事件
option.parent().keydown(legend_select_key_down);
$(".select_txt").mousedown(show_options);
$(".option li").click(write_seleted);
$("body").mousedown(hide_options);
$(document).mousedown(hide_options);
$(".mod_select").show();
}
init_select();
</script>
</body>
</html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
.mod_select{display: none;font-size:12px;font-family:'Trebuchet MS',Verdana, sans-serif;position:absolute;left:20%;top:10%;white-space:nowrap;}
.select_label{color:#000;float:left;line-height:16px;padding-right:4px;}
.select_box{margin:0;padding:0;background:#eee;border:solid 1px #ACBABD;border-radius:2px;position:relative;list-style-type:none;float:left;height:15px;}
.select_txt{padding:0;margin-top:1px;display:inline-block;text-indent:8px;width:100%;line-height:12px;height:12px;cursor:text;overflow:hidden;color:#000;}
.select_arrow{position:absolute;float:right;top:4px;right:4px;border-style:solid;border-width:6px 4px 0px 4px;border-color:#555 #eee #eee #eee;height:0;width:0;font-size:0}
.option{margin:0;padding:0;display:none;background:#eee;width:100%;border:solid 1px #ccc;position:absolute;top:14px;left:-1px;overflow-y:auto;}
.option li{margin:0;padding:0;display:block;height:14px;line-height:14px;text-align:left;text-indent: 8px;width:100%;color:#000;}
.option li.select_hover{background:#316AC5;color:#FFF;text-decoration:none;}
</style>
</head>
<body>
<div class="mod_select">
<span class="select_label">选择:</span>
<div class="select_box" tabindex="0">
<span class="select_txt">
<text>选择全部</text>
<strong class="select_arrow"></strong>
</span>
<ul class="option">
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 选中后填充文本框
write_seleted = function() {
var value = $(this).text();
$(this).parent().siblings(".select_txt").find("text").text(value);
$(this).parent().hide();
}
// 收起下拉列表
hide_options = function(event) {
var eo = $(event.target);
if (eo.attr("class")!="option" && !eo.parent(".option").length) {
$('.option').hide();
};
}
// 切换下拉列表的展开与收起
show_options = function(event) {
event.stopPropagation();
$(this).siblings('.option').toggle();
if ($(this).siblings('.option').is(":visible")) {
$(this).siblings('.option').find('li').mouseenter(function() {
$(this).siblings('.select_hover').removeClass('select_hover');
$(this).addClass('select_hover');
});
} else {
$(this).siblings('.option').unbind('mouseenter');
};
}
// 键盘按键事件
legend_select_key_down = function(event) {
if (event.which == 13) {
event.preventDefault();
if ($(this).find('.option').is(":visible")) {
$(this).find('.select_hover').click();
} else {
$(this).find('.select_txt').mousedown();
};
};
if ($(this).find('.option').is(":visible") && (event.which == 37 || event.which == 38)) {
event.preventDefault();
$(this).find('.select_hover').prev().mouseenter();
if ($(this).find('.select_hover').position().top < 0) {
$(this).find('.option').scrollTop($(this).find('.option').scrollTop() - 14);
};
};
if ($(this).find('.option').is(":visible") && (event.which == 39 || event.which == 40)) {
event.preventDefault();
$(this).find('.select_hover').next().mouseenter();
if ($(this).find('.select_hover').position().top > 383) {
$(this).find('.option').scrollTop($(this).find('.option').scrollTop() + 14);
};
};
}
// 求下拉列表合适的宽度
get_select_width = function(node, font_size) {
var options = node.find("li");
var string_length = 0;
$.each(options, function(index) {
var textContent = options[index].textContent;
// 处理中文长度
var textContent_length = textContent.replace(/[^\x00-\xff]/g,"01").length;
if (textContent_length > string_length) {string_length = textContent_length;};
});
if (string_length % 2 != 0) {string_length += 1;};
string_length = string_length * font_size / 2 + font_size / 12 * 8;
$(".mod_select").show();
node.show();
if (node[0].offsetHeight > node[0].clientHeight) {
string_length += 16; //如果下拉列表显示滚动条,加上滚动条宽度
};
node.hide();
$(".mod_select").hide();
return string_length;
}
resize_base_font_size = function(font_size) {
$(".mod_select")[0].style.fontSize = font_size + "px";
$(".select_label")[0].style.lineHeight = font_size + font_size / 3 + "px";
$(".select_label")[0].style.paddingRight = font_size/3 + "px";
$(".select_box")[0].style.height = font_size + font_size / 4 + "px";
$(".select_box")[0].style.borderWidth = font_size / 12 + "px";
$(".select_txt")[0].style.marginTop = font_size / 12 + "px";
$(".select_txt")[0].style.textIndent = font_size / 12 * 8 + "px";
$(".select_txt")[0].style.lineHeight = font_size + "px";
$(".select_txt")[0].style.height = font_size + "px";
$(".select_arrow")[0].style.top = font_size / 3 + "px";
$(".select_arrow")[0].style.right = font_size / 3 + "px";
$(".select_arrow")[0].style.borderTopWidth = font_size / 2 + "px";
$(".select_arrow")[0].style.borderRightWidth = font_size / 3 + "px";
$(".select_arrow")[0].style.borderLeftWidth = font_size / 3 + "px";
$(".option")[0].style.left = font_size / -12 + "px";
$(".option")[0].style.borderWidth = font_size / 12 + "px";
$(".option")[0].style.top = font_size + font_size / 6 + "px";
var select_width = get_select_width($(".option"), font_size);
$.each($(".option li"), function() {
$(this)[0].style.height = font_size + font_size / 6 + "px";
$(this)[0].style.borderRightWidth = 1 + "px";
$(this)[0].style.borderRightColor = "#ccc";
$(this)[0].style.borderRightStyle = "solid";
$(this)[0].style.width = select_width - 16 + "px";
$(this)[0].style.lineHeight = font_size + font_size / 6 + "px";
$(this)[0].style.textIndent = font_size / 12 * 8 + "px";
});
$(".select_box")[0].style.width = select_width + "px";
}
function init_select() {
var option = $(".option");
// 超出此高度显示滚动条
option[0].style.maxHeight = "400px";
// 添加选项
var first_optins = ['<li class="select_hover">选择全部</li>',
'<li>不选全部</li>',
'<li style="border-bottom:solid 1px #ACBABD;height:14px;padding-bottom:2px;">反选全部</li>',
'<li style="padding-top:2px;">总量</li>',
'<li>haohaohao.com</li>',
'<li>hehehehehehe.cn</li>',]
$.each(first_optins, function(index) {
option.append(first_optins[index]);
});
var i;
for (i = 0; i < 20; ++i) {
option.append("<li>" + i + ".com</li>");
};
// 根据字体大小调整下拉列表大小
var font_size = 24;
resize_base_font_size(font_size);
// 绑定事件
option.parent().keydown(legend_select_key_down);
$(".select_txt").mousedown(show_options);
$(".option li").click(write_seleted);
$("body").mousedown(hide_options);
$(document).mousedown(hide_options);
$(".mod_select").show();
}
init_select();
</script>
</body>
</html>