效果出现问题~
使用.hide和.show，在空白点击字体颜色为灰色，不能变为黑色，已将#allProvince换为.province ul，望解惑~
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
<link rel="stylesheet" href="css/public.css" type="text/css">
<style>
body {
font: 16px/32px "微软雅黑";
background: #333;
}
#box {
width: 500px;
height: 326px;
border: 3px solid #000;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
margin: -163px 0 0 -250px;
}
.province {
width: 320px;
height: 42px;
background: #c00;
margin: 80px auto;
position: relative;
}
.province strong {
width: 64px;
height: 42px;
line-height: 42px;
display: block;
float: left;
color: #fff;
padding-left: 10px;
}
#selectProvince {
width: 200px;
height: 28px;
display: block;
float: left;
background: #fff url(images/province_sprites.png) no-repeat 190px 1px;
margin-top: 7px;
padding-left: 8px;
color: #ccc;
cursor: pointer;
}
.province ul {
width: 309px;
line-height: 30px;
padding-left: 10px;
border: 1px solid #dfdfdf;
border-top: none;
clear: both;
position: absolute;
top: 42px;
left: 0;
background: #fff;
display: none;
z-index: 101;
}
.province ul li {
height: 30px;
border-bottom: 1px solid #dfdfdf;
}
.province ul li b {
font-weight: bold;
width: 40px;
text-align: center;
display: inline-block;
}
.province ul span {
padding-right: 15px;
cursor: pointer;
}
.province ul li span:hover {
color: #c00;
}
#layer {
width: 100%;
height: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 100;
filter: alpha(opacity=0);
opacity: 0;
display: none;
}
.show {
color: #ccc;
background-position: 190px -17px;
}
.hide {
color: #000;
background-position: 190px 1px;
}
</style>
</head>
<body>
<div id="box">
<div>
<strong>送货至：</strong>
<span id="selectProvince">北京</span>
<ul id="allProvince">
<li><b>A</b><span>安徽</span></li>
<li><b>B</b><span>北京</span></li>
<li><b>C</b><span>成都</span></li>
<li><b>D</b><span>东北</span></li>
<li><b>F</b><span>福建</span></li>
<li><b>G</b><span>广东</span><span>广西</span></li>
<li><b>H</b><span>河南</span><span>河北</span><span>黑龙江</span></li>
<li><b>J</b><span>吉林</span></li>
</ul>
</div>
</div>
<div id="layer"></div>
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function getDom(id) {
return document.getElementById(id);
}
function showProvince() {
getDom("selectProvince").onclick = showAllProvince;
}
function showAllProvince() {
getDom("allProvince").style.display = 'block';
getDom("layer").style.display = "block";
// getDom("selectProvince").style.backgroundPosition = "190px -17px";
// getDom("selectProvince").style.color = "#ccc";
getDom("selectProvince").className = "show";
getDom("layer").onclick = function() {
hideAllProvince();
}
selectProvince();
}
function hideAllProvince() {
getDom("allProvince").style.display = 'none';
getDom("layer").style.display = 'none';
// getDom("selectProvince").style.backgroundPosition = "190px 1px";
// getDom("selectProvince").style.color = "#000";
getDom("selectProvince").className = "hide";
}
function selectProvince() {
var pro = getDom("allProvince").getElementsByTagName("li");
var links;
for(var i = 0; i < pro.length; i++) {
links = pro[i].getElementsByTagName("span");
for(var j = 0; j < links.length; j++) {
links[j].onclick = function() {
getDom("selectProvince").innerHTML = this.innerHTML;
hideAllProvince();
}
}
}
}
addLoadEvent(showProvince);
</script>
</body>
</html>
