select宽度设定.docVIP

关于Select宽度设定 在使用Select时,有时候需要固定宽度,有时候需要自适应,下面说下要设定固定宽度时要注意的地方:控件设定宽度一般是直接指定width属性即可,但Select设定固度是使用style=width:n的形式设定,如果只设置width属性,则Select的宽度还是会随下面选择项的宽度变化而变化的,如: select width=20pxoption1111111111111111111/optionoption22/optionoption1/optionoption44444444444444444444444444444444/option/select 则Select的宽度是第四个选项的宽度,即最终页面上显示的Select宽度肯定是大于20px的,如果是这种方式: select style=width:20pxoption1111111111111111111/optionoption22/optionoption1/optionoption44444444444444444444444444444444/option/select 则Select的宽度会固定为20px,即第四个选项会显示不完整,达到了固定Select宽度的目的. 自动调整为最大长度:select?? style=width:expression((this.offsetWidth100)?auto:100)?? option?? hellohellohellohellohellohellohellohellohellohello/option/selectbr/?? 鼠标点时自动变成最大长度,离开或选中时恢复原长度select name=s2 style=width:50px onFocus=this.style.width=auto onblur=this.style.width=50px onChange=this.style.width = 50px style=width:50pxoption/optionoption1111111111111111111111111111/optionoption2222222222222222222/option/select br 鼠标滑过时自动变成最大长度,离开或选中时恢复原长度select name=s2 style=width:50px onmouseover=this.style.width=auto onblur=this.style.width=50px onChange=this.style.width = 50px style=width:50pxoption/optionoption1111111111111111111111111111/optionoption2222222222222222222/option/select br选择后在页面的其它位置显示选择的项目div?? id=dsp/div?? select?? name=select?? size=1?? onchange=dsp.innerText=this.options[this.selectedIndex].text?? option?? value=1test/option?? option?? value=2?? selectedtest2/option?? /select br鼠标滑过时显示当前选择的项目的值div id=div1 style=overflow:auto;height:expression(5*15);width:expression(document.all.s1.offsetWidth+18); select name=s1 size=1 style=width:120 onmousemove=showTitle(this); onmouseout=hideTitle(this); optionaaaaaaaaaaaaaaaaaaaaaa1 /optionoption bbbbbbbbbbbbbbbbbbbbbbbbb1 /optionoptioncccccccccccccccccccccccc1 /optionoptionddddddddddddddddddddddd1 /optionoptioneeeeeeeeeeeeeeeeeeeeeee1 /optionoptionfffffffffffffffffffffffffff1 /option/select /div script // 定义Popup var oP=window.createPopup(); oP.do