我们平常习惯了select下拉的形式，如果突然有需求说要做成上拉的形式，你该怎么做？昨天在一个技术交流群里面就有人提出这个问题。

其实select本身会根据自己当前的位置跟option的选项高度来自动判断，是该上拉还是下拉。看例子

原文：http://bbs.blueidea.com/thread-2969006-1-1.html

  <select>
    <option value="1" selected="selected">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
  </select>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <select>
    <option value="1" selected="selected">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
  </select>

如果硬要select为上拉，那就只能通过js去控制通过ul去模拟select了。

ul 模拟html代码原理，然后控制它的显示跟隐藏就行了。

<div style="position:relative;margin-top:300px;">
<a href="#" style="height:25px;width:100px;background:#cccccc">选中我出现上拉</a>
<ul style="margin:0;position:absolute;bottom:25px;background:#eeeeee;">
<li>我是二级菜单</li>
<li>我是二级菜单2</li>
<li>我是二级菜单3</li>
<li>我是二级菜单4</li>
</ul>
</div>

这是个美化的例子，出处忘记哪了，js的信息显示

Author: Utom
URL: http://utombox.com/

他通过把页面的select全部转化为ul，option转成li，这样就可以很方便的控制select的样式了。你可以 点击这里下载 。

上面的例子是下拉框的，而且并没有解决文字过长以后文字出现在三角图形上的问题，在上面的基础上，我修复了一下，并变成了上拉框，简单做了图片美化，当然图片只是并没有原来的例子漂亮，我只是想说它可以被你随意修改。文章第一张图的例子： select 上拉 demo 下载