脚本宝典收集整理的这篇文章主要介绍了使select在选中/聚焦时列出所有选项目前比较好的处理方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在开发中,遇到这样一个需求情况,因此记录下来以备用
需求背景 在页面上使用快捷键盘快捷定位到支付方式选择框
(一个下拉列表)并进行选择。
技术难点 目前浏览器并不支持通过代码定位下拉列表时就列出其下所有选项,只能通过鼠标点击。
在网上找了些资料后,得出目前比较好的处理方式;
利用select的size属性,配合
盒子布局的pos
ITion属性来实现,具体代码如下:
<td align="right">
支付方式:
</td>
<td style="padding:0px;vert
ical-align:to
p;">
<!-- 这里必须用div包着select,否则在ff下不兼容 -->
<span style="color:
#ff0000"><div style="position:relative;padding:1px;">
</span> <select id="payTy
PE" n
ame="payType" style="position:absolute;" onfocus="e
xpand(this)" onblur="unexpand(this)">
<option>
人民币</option>
<option>
美元</option>
<option>信用卡</option>
<option>港币</option>
<option>港币</option>
</select>
<span style="color:#ff0000"></div>
</span></td>
expand和unexpand方法都很
简单:
function expand(obj){
$(obj).attr("size","10");
}
function unexpand(obj){
$(obj).attr("size","1");
}
把select的position设置为absolute,使其
不影响dom的流布局。再把其容器的position设置为relative,使select根据其容器来定位。
这里需要注意的是在table元素中必须使用div作为select的容器,因为根据w3c的css标准,在table相关元素设置position:relative是未定义的,所以在ff下select元素会直接根据body元素来定位。
参考的资料:
http://www.php
-insite
.COM/autoexpand_select.ht
ML 直接查看页面
源代码
http://
BBS.csdn.net/topics/330158935 留意lingshuo1993的回答
脚本宝典总结
以上是脚本宝典为你收集整理的使select在选中/聚焦时列出所有选项目前比较好的处理方式全部内容,希望文章能够帮你解决使select在选中/聚焦时列出所有选项目前比较好的处理方式所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。