selectedIndex 用法

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>

如果问题，欢迎大家及时指点，一同交流，共同提高