【急】关于一个界面问题！

Question

对于单选下拉框，能不能不默认选中某一个option
<select>
  <option>a1</option>
  <option>a2</option>
</select>
即要求a1或a2不默认出现在下拉框中？谢谢！

Answer 1

<select> 
  <option> </option> 
  <option>a1 </option> 
  <option>a2 </option> 
</select> 是不是这个意思？

Answer 2

<select> 
  <option></option> 
  <option>a1 </option> 
  <option>a2 </option> 
</select> 
加个空的不就行了?

Answer 3

但是这样点击下拉的时候，上面会多一行空的！顺便说一下，这个界面用的是wurfl开发手机界面，其效果是一个弹出式页面，这样上面会多出一个空行在首行！

Answer 4

矛盾倒是没有，客户只是有点理想化，新浪首页的”选择去向“，可以把这个“选择去向”置为空白，在点击下拉的时候，就不会出现空白行，并且默认没有选中，只是这个wurfl标签库好像不支持这种写法!~~

Answer 5

<script type="text/javascript">
var childCreate=false;
function Offset(e)
//取标签的绝对位置
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {
top : t,
left : l,
width : w,
height : h
}
}
function loadSelect(obj){
//第一步：取得Select所在的位置
var offset=Offset(obj);
//第二步：将真的select隐藏
obj.style.display="none";
//第三步：虚拟一个div出来代替select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "absolute";
iDiv.style.width=offset.width + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.background="url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";
iDiv.style.border="1px solid #ccc";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//第四步：将select中默认的选项显示出来
var tValue="选择去向";
iDiv.innerHTML=tValue;
//第五步：模拟鼠标点击
iDiv.onmouseover=function(){//鼠标移到
iDiv.style.background="url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";
}
iDiv.onmouseout=function(){//鼠标移走
iDiv.style.background="url(http://www.zcool.com.cn/pic/png5/130/pixelicious_001.png) no-repeat right -6px";
}
iDiv.onclick=function(){//鼠标点击
if (document.getElementById("selectchild" + obj.name)){
//判断是否创建过div
   if (childCreate){
    //判断当前的下拉是不是打开状态，如果是打开的就关闭掉。是关闭的就打开。
    document.getElementById("selectchild" + obj.name).style.display="none";
    childCreate=false;
   }else{
    document.getElementById("selectchild" + obj.name).style.display="";
    childCreate=true;
   }
}else{
   //初始一个div放在上一个div下边，当options的替身。
   var cDiv = document.createElement("div");
   cDiv.id="selectchild" + obj.name;
   cDiv.style.position = "absolute";
   cDiv.style.width=offset.width + "px";
   cDiv.style.height=obj.options.length *20 + "px";
   cDiv.style.top=(offset.top+offset.height+2) + "px";
   cDiv.style.left=offset.left + "px";
   cDiv.style.background="#f7f7f7";
   cDiv.style.border="1px solid silver";
   var uUl = document.createElement("ul");
   uUl.id="uUlchild" + obj.name;
   uUl.style.listStyle="none";
   uUl.style.margin="0";
   uUl.style.padding="0";
   uUl.style.fontSize="12px";
   cDiv.appendChild(uUl);
   document.body.appendChild(cDiv); 
   childCreate=true;
   for (var i=0;i<obj.options.length;i++){
    //将原始的select标签中的options添加到li中
    var lLi=document.createElement("li");
    lLi.id=obj.options[i].value;
    lLi.style.textIndent="4px";
    lLi.style.height="20px";
    lLi.style.lineHeight="20px";
    lLi.innerHTML=obj.options[i].innerHTML;
    uUl.appendChild(lLi);
   }
   var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
   for (var j=0;j<obj.options.length;j++){
    //为li标签添加鼠标事件
    liObj[j].onmouseover=function(){
     this.style.background="gray";
     this.style.color="white";
    }
    liObj[j].onmouseout=function(){
     this.style.background="white";
     this.style.color="black";
    }
    liObj[j].onclick=function(){
     //做两件事情，一是将用户选择的保存到原始select标签中，要不做的再好看表单递交后也获取不到select的值了。
     obj.options.length=0;
     obj.options[0]=new Option(this.innerHTML,this.id);
     //同时我们把下拉的关闭掉。
     document.getElementById("selectchild" + obj.name).style.display="none";
     childCreate=false;
     iDiv.innerHTML=this.innerHTML;
    }
   }
}
}
}
        </script>
<style type="text/css">
select{width:200px;height:20px;}
</style>
</head>
<body>
<form name="f">  <select id="province" name="province">
    <option value="1">VIP邮箱</option>
    <option value="2">免费邮箱</option>
    <option value="3">2008邮箱</option>
   </select>
</form>
<script type="text/javascript">
   loadSelect(document.f.province);
</script>

Answer 6

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>选择去向</title><script language="javascript">
<!--
var sina = {
$ : function(objName){
if(document.getElementById){return eval('document.getElementById("'+objName+'")')}
else{return eval('document.all.'+objName)}
},
addEvent : function(obj,eventType,func){
if(obj.attachEvent){obj.attachEvent("on" + eventType,func);}
else{obj.addEventListener(eventType,func,false)}
},
delEvent : function(obj,eventType,func){
if(obj.detachEvent){obj.detachEvent("on" + eventType,func)}
else{obj.removeEventListener(eventType,func,false)}
},
readCookie : function(l){
var i="",I=l+"=";
if(document.cookie.length>0){
offset=document.cookie.indexOf(I);
if(offset!=-1){
offset+=I.length;
end=document.cookie.indexOf(";",offset);
if(end==-1)end=document.cookie.length;
i=unescape(document.cookie.substring(offset,end))
}
};
return i
},
writeCookie : function(O,o,l,I){
var i="",c="";
if(l!=null){
i=new Date((new Date).getTime()+l*3600000);
i="; expires="+i.toGMTString()
};
if(I!=null){c=";domain="+I};
document.cookie=O+"="+escape(o)+i+c
}
};
function Close_Select(e){
thisObj = e.target?e.target:event.srcElement;
do{
if(thisObj.id == "gotoSelect") return;
if(thisObj.tagName == "BODY"){SelectClose();return;};
thisObj = thisObj.parentNode;
}while(thisObj.parentNode);
};
function goSelect(){
if(sina.$("gotoSelecter").style.display == "block"){
SelectClose();
}else{
sina.$("gotoSelecter").style.display = "block";
sina.addEvent(document.body,"mousedown",Close_Select);
}
};
function SelectClose(){
sina.$("gotoSelecter").style.display = "none";
sina.delEvent(document.body,"mousedown",Close_Select);
};//-->
</script>
<style>
<!--
*{font-size:12px;}
.gotoSelect{
width:110px; 
position:absolute; 
top:6px; 
left:278px; 
z-index:999;
}
#Selectgoto{
width: 79px; 
height: 17px; 
overflow: hidden; 
text-align: center; 
line-height: 17px; 
display: block; 
cursor: pointer; 
border: 1px solid #ffa930; 
padding: 0 18px 0 0; 
background: #fff url('http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif') no-repeat 0 -200px;
}
#gotoSelecter{
display: none; 
width: 97px; 
overflow:hidden; 
position: absolute; 
top: 18px; 
left: 0; 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); 
-moz-opacity: .9; 
opacity: 0.9; 
list-style-type: none; 
border: 1px solid #fdad34; 
padding: 5px 0; 
background: #fffcf5 url('http://www.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif') repeat-x 0 -150px;
}
#gotoSelecter li{
line-height: 22px; 
height: 20px; 
overflow: hidden; 
text-align: left; 
border: 0 none; 
margin: 0; 
padding: 0
}
#gotoSelecter a{
display: block; 
height: 20px; 
overflow: hidden; 
color: #000; 
text-decoration: none; 
margin: 0 5px; 
padding-left: 12px
}#gotoSelecter LI A {
DISPLAY: block; PADDING-LEFT: 12px; MARGIN: 0px 5px; OVERFLOW: hidden; HEIGHT: 20px
}
#gotoSelecter LI A:hover {
BACKGROUND: #fef0e2; TEXT-DECORATION: none
}
#gotoSelecter LI A:active {
BACKGROUND: #fef0e2; TEXT-DECORATION: none
}#gotoSelecter .Selecter_line{
height: 1px; 
overflow: hidden; 
font-size: 0; 
line-height: 0; 
text-align: left; 
border: 0 none; 
margin: 2px 5px 3px 5px; 
padding: 0; 
background: #ffc88e
}ul{margin:0;padding:0;border:0;}
ul{list-style-type:none;}
div{margin:0;padding:0;border:0;}
-->
</style>
</head><body>
<div class="gotoSelect" id="gotoSelect">
<span id="Selectgoto" onclick="goSelect();">选择去向</span> 
<ul id="gotoSelecter">
<li><a href="javascript:void(0);">免费邮箱</a> </li>
<li><a href="javascript:void(0);">VIP邮箱</a> </li>
<li><a href="javascript:void(0);">2008邮箱</a> </li>
<li><a href="javascript:void(0);">同名邮箱</a> </li>
<li class="Selecter_line"></li>
<li><a href="javascript:void(0);">空间</a> </li>
<li><a href="javascript:void(0);">博客</a> </li>
<li><a href="javascript:void(0);">播客</a> </li>
<li><a href="javascript:void(0);">相册</a> </li>
<li class="Selecter_line"></li>
<li><a href="javascript:void(0);">论坛</a> </li>
<li><a href="javascript:void(0);">贴吧</a> </li>
<li class="Selecter_line"></li>
<li><a href="javascript:void(0);">会员中心</a></li>
</ul>
</div>
<p>
<style>
.ttt{
width:110px; 
position:absolute; 
top:36px; 
left:278px; 
z-index:1;
}</style>
<div class="ttt">ppppppppp</div></center>
</body></html>