设置下拉款的宽度

最新推荐文章于 2024-06-06 10:14:06 发布

转载最新推荐文章于 2024-06-06 10:14:06 发布 · 928 阅读

文章标签：

#javascript #浏览器 #css #div #ie

本文将介绍如何在实际应用中优化Select组件的宽度，确保其在内容长度变化时能够自适应调整，同时提供最大和最小宽度限制，并在内容过长时给出提示。此外，还将展示如何在不依赖JavaScript的情况下实现水平滚动条，以便于全面查看选单内容。

概述：在实际应用中，很多时候都会用到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>