selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。若允许多重选择，则仅会返回第一个被选选项的索引号。
selectObject.selectedIndex=number
当自定义下拉菜单时，可通过selectedIndex 与模拟的元素的index值相等，去建自己想要的效果。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0} .seDiv{width:200px;height:30px; position:relative; border:1px solid red; display:inline-block} .seDiv p{height:30px; text-align:center; line-height:30px;} .seDiv ul{width:200px;height:30px; position: absolute;top:30px;left:0; display:none;} .seDiv ul li{ list-style:none;height:30px; line-height:30px; text-align:center;border:1px solid #000;} </style> <script> window.onload=function(){ var oSe=document.getElementsByName('se')[0]; var oSeDiv=document.getElementById('seDiv'); var oP=oSeDiv.children[0]; var oUl=oSeDiv.children[1]; var aLi=oUl.children; oP.onclick=function(){ if(oUl.style.display=='block'){ oUl.style.display='none'; }else{ oUl.style.display='block'; }; }; for(var i=0; i<aLi.length; i++){ aLi[i].index=i; aLi[i].onmouseover=function(){ for(var i=0; i<aLi.length; i++){ aLi[i].style.background='#fff'; } this.style.background='#ccc'; }; aLi[i].onclick=function(){ oP.innerHTML=this.innerHTML; oUl.style.display='none';
oSe.selectedIndex=this.index; } } } </script> </head> <body> <form action="http://www.baidu.com" method="get"> <div id="seDiv" class="seDiv"> <p>北京</p> <ul> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> </ul> </div> <select name="se"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> <option value="sz">深圳</option> </select> <input type="text" name="wd"> <input type="submit" value="提交"> </form> </body> </html>