使select在选中/聚焦时列出所有选项目前比较好的处理方式
导读：收集整理的这篇文章主要介绍了使select在选中/聚焦时列出所有选项目前比较好的处理方式，觉得挺不错的，现在分享给大家，也给大家做个参考。 在开发中，遇到这样一个需求情况，因此记录下来以备用 需求背景 在页面上使用快捷键盘快捷定位...
收集整理的这篇文章主要介绍了使select在选中/聚焦时列出所有选项目前比较好的处理方式，觉得挺不错的，现在分享给大家，也给大家做个参考。 在开发中，遇到这样一个需求情况，因此记录下来以备用 需求背景
在页面上使用快捷键盘快捷定位到支付方式选择框（一个下拉列表）并进行选择。
技术难点
目前浏览器并不支持通过代码定位下拉列表时就列出其下所有选项，只能通过鼠标点击。
在网上找了些资料后，得出目前比较好的处理方式；
利用select的size属性，配合盒子布局的posITion属性来实现，具体代码如下：
复制代码代码如下:
td align="right">
支付方式:
/td>
td style="padding:0px; vertical-align:top; ">
!-- 这里必须用div包着select，否则在ff下不兼容 -->
span style="color:#ff0000"> div style="position:relative; padding:1px; ">
/span> select id="payTyPE" name="payType" style="position:absolute; " onfocus="expand(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.htML 直接查看页面源代码
http://BBS.csdn.net/topics/330158935 留意lingshuo1993的回答
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 使select在选中/聚焦时列出所有选项目前比较好的处理方式
本文地址： https://pptw.com/jishu/587914.html