您现在的位置是：网站首页> 编程资料编程资料
使select在选中/聚焦时列出所有选项目前比较好的处理方式_HTML/Xhtml_网页制作_
2023-11-11
342人已围观
简介 在页面上使用快捷键盘快捷定位到支付方式选择框（一个下拉列表）并进行选择，在网上找了些资料后，得出目前比较好的处理方式在此与大家分享下，希望对大家有所帮助
在开发中，遇到这样一个需求情况，因此记录下来以备用
需求背景
在页面上使用快捷键盘快捷定位到支付方式选择框（一个下拉列表）并进行选择。
技术难点
目前浏览器并不支持通过代码定位下拉列表时就列出其下所有选项，只能通过鼠标点击。
在网上找了些资料后，得出目前比较好的处理方式；
利用select的size属性，配合盒子布局的position属性来实现，具体代码如下：
支付方式:
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的回答
需求背景
在页面上使用快捷键盘快捷定位到支付方式选择框（一个下拉列表）并进行选择。
技术难点
目前浏览器并不支持通过代码定位下拉列表时就列出其下所有选项，只能通过鼠标点击。
在网上找了些资料后，得出目前比较好的处理方式；
利用select的size属性，配合盒子布局的position属性来实现，具体代码如下：
复制代码
代码如下:支付方式:
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的回答
相关内容
- Html+CSS浮动的广告条实现分解_HTML/Xhtml_网页制作_
- HTML页面加载和解析流程详细介绍_HTML/Xhtml_网页制作_
- Form表单的action和onSubmit示例介绍_HTML/Xhtml_网页制作_
- html左右布局示例代码_HTML/Xhtml_网页制作_
- HTML+css制作简易进度条_HTML/Xhtml_网页制作_
- a标签伪类的作用及书写顺序是什么_HTML/Xhtml_网页制作_
- 表单元素属性readonly和disabled使用对比_HTML/Xhtml_网页制作_
- 按钮与回车键关联的js代码_HTML/Xhtml_网页制作_
- 迷你西游挑战星级攻略 教你如何轻松三星过关_手机游戏_游戏攻略_
- 我叫MT传说四暗影来袭:四暗影竞技场PVP战斗实录_手机游戏_游戏攻略_
