select下拉框宽度设置问题(自适应宽度,水平滚动条)
来源:互联网 发布:同意的计算 知乎 编辑:程序博客网 时间:2024/06/08 12:23
概述: 在实际应用中,很多时候都会用到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>
- select下拉框宽度设置问题(自适应宽度,水平滚动条)
- select地址下拉框模拟(宽度根据内容自适应)
- 设置select下拉框的宽度
- jggrid 设置了自适应宽度仍然有滚动条的问题
- jqgrid 宽度充足 出现水平滚动条
- IE下Select下拉框宽度无法自适应Bug
- 关于select下拉框最后一项鼠标经过不能变色及设置宽度后下拉框无法滚动的bug?
- DataTables自定义表格宽度(设置横向滚动条)
- 设置 滚动条 宽度为0
- 转载:解决html的select(下拉框)宽度问题
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- 获取滚动条宽度
- iframe自适应宽度和高度,没有滚动条
- 设置 li自适应宽度
- select下拉框的宽度调整
- WinForm ListView 列自适应宽度(去除最后空白列,去除横向滚动条)
- ExtJs下拉列表宽度自适应
- 3912. 计算星期几
- HTML基本内容
- RCP Application 详解
- 时尚红人马宁:我们可以选择无为
- trac和subversion的备份和恢复
- select下拉框宽度设置问题(自适应宽度,水平滚动条)
- C# 完美实现VPN控制
- 彻底解密C++宽字符
- 解析xml字符串2
- struts数据标签的使用
- add pinyin input to ubuntu system
- asp.net不同后辍名的文件
- java技巧(七)
- Android 企业需求与开发者状况