Xuanmo Blog

select的默认样式比较不好看，处理起来也并不是很方便，所以我们可以自己利用其他的标签来做一个，替代select，方法有很多，我的做法欢迎大家指出不好的地方。
    附上源码：

<div id="box">
    <p>请选择 &nbsp;</p>
    <ul class="hide">
        <li>请选择</li>
        <li>HTML</li>
        <li>JavaScript</li>
        <li>HTML5</li>
        <li>CSS3</li>
    </ul>
</div>

js

var oBox = document.getElementById('box');
var oP = oBox.getElementsByTagName('p')[0];
var oSpan = oBox.getElementsByTagName('span')[0];
var oUl = oBox.getElementsByTagName('ul')[0];
var aLi = oBox.getElementsByTagName('li');
var onOff = true;
oP.onclick = function () {
    if (onOff) {
        oUl.className = 'show';
        oSpan.style.transform = 'rotate(180deg)';
        onOff = false;
    } else {
        oUl.className = 'hide';
        oSpan.style.transform = 'rotate(360deg)';
        onOff = true;
    }
}
for (var i = 0; i < aLi.length; i++) {
    aLi[i].index = i;
    aLi[i].onclick = function () {
        onOff = true;
        oP.innerHTML = this.innerHTML;
        oUl.className = 'hide';
        oSpan.style.transform = 'rotate(360deg)';
    }
}

DEMO展示