设置下拉款的宽度

概述： 在实际应用中，很多时候都会用到select，但是由于下拉框的内容宽度不可控，就导致select宽度往往不是我们想要的。

需求：

             1、给select设置最小值，在内容小于最小值时，要控制select的宽度是最小值，而不能让它太短，影响美观程度。

             2、对应的也需要设置最大值。

             3、当内容过长时，给出提示。

实现：

1、CSS：自适应宽度在[100,200]之间

       注意：这里使用的expression()，只有IE支持，如果不需要考虑浏览器兼容性，可以使用。

  <select id="s" style="width:expression((this.offsetWidth < 100) ? '100' : ((this.offsetWidth > 200)? '200' : this.offsetWidth))">   
   <option value="1" title="1">1</option>  
   <option value="2" title="2">2</option>  
   <option value="3" title="3">3</option>  
   <option value="4" title="4">4</option>  
   <option value="5" title="5">5</option>  
   <option value="6">6</option>  
   <option value="7">7</option>  
   <option value="8">8</option>  
   <option value="9" title="--9999999999999999999999999999999999--">--9999999999999999999999999999999999--</option>  
  </select>  

 2、javascript：这就不存在浏览器的问题了，只要浏览器没有禁用javascript的话，自适应宽度在[100,200]之间

   <select id="s">   
   <option value="1" title="1">1</option>  
   <option value="2" title="2">2</option>  
   <option value="3" title="3">3</option>  
   <option value="4" title="4">4</option>  
   <option value="5" title="5">5</option>  
   <option value="6">6</option>  
   <option value="7">7</option>  
   <option value="8">8</option>  
   <option value="9" title="--9999999999999999999999999999999999--">--9999999999999999999999999999999999--</option>  
  </select>  
  <script type="text/javascript">
   var sel =  document.getElementById("s");
   sel.style.width = ((sel.offsetWidth < 100) ? '100' : ((sel.offsetWidth > 200)? '200' : sel.offsetWidth));
  </script>

注意：如果使用javascript设置select宽度的话，那就必须保证select已经加载完毕了，最起码是宽度最大的option已经加载了。

3、水平滚动条：

   前面的select在内容超长时，都是通过title属性，在鼠标悬浮时，给出提示的，效果如图：

但是有的时候，我们需要对全部内容进行查看，也就是需要添加一个水平的滚动条，效果如下图：

 

代码：

<div id="test" style="height:200px;width:200px;overflow:auto;border:1 solid black;"> 
  <select id="s">  
   <option value="1" title="1">1</option>  
   <option value="2" title="2">2</option>  
   <option value="3" title="3">3</option>  
   <option value="4" title="4">4</option>  
   <option value="5" title="5">5</option>  
   <option value="6">6</option>  
   <option value="7">7</option>  
   <option value="8">8</option>  
   <option value="9">9</option>  
   <option value="10">10</option>  
   <option value="11">11</option>
   <option value="12">12</option>  
   <option value="13">13</option>  
   <option value="14">14</option>  
   <option value="15">15</option>  
   <option value="16">16</option>  
   <option value="17">17</option>
   <option value="18">18</option>  
   <option value="19">19</option>  
   <option value="20">20</option>  
   <option value="21">21</option>  
   <option value="22">22</option>  
   <option value="23">23</option>
   <option value="24">24</option>  
   <option value="25" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>  
  </select>  
  <script type="text/javascript">
   var sel = document.getElementById("s");
   sel.size = sel.options.length;
  </script>
 </div>