The current better way to make select list all options when selected/focused

During development, I encountered such a requirement, so I recorded it for future use.

Demand background

Use the keyboard shortcut to navigate to the payment method selection box (a drop-down list) on the page and select it.

Technical Difficulties

Currently, browsers do not support listing all options under a drop-down list by locating it through code, and it can only be done by mouse click.

After searching for some information online, I came up with the best way to deal with it.

Use the size attribute of select and the position attribute of box layout to achieve this. The specific code is as follows:

Copy code

The code is as follows:

<td align="right">
Payment Methods:
</td>
<td style="padding:0px;vertical-align:top;">

<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>RMB</option>
<option>US dollars</option>
<option>Credit card</option>
<option>Hong Kong Dollar</option>
<option>Hong Kong Dollar</option>
</select>
<span style="color:#ff0000"></div>
</span></td>

The expand and unexpand methods are both simple:

Copy code

The code is as follows:

function expand(obj){
$(obj).attr("size","10");
}
function unexpand(obj){
$(obj).attr("size","1");
}

Set the select position to absolute so that it does not affect the DOM flow layout. Then set the position of its container to relative so that the select is positioned according to its container.

It should be noted here that div must be used as the container of the select in the table element, because according to the w3c CSS standard, setting position:relative on table-related elements is undefined, so under ff the select element will be directly positioned according to the body element.

References:

http://www.php-insite.com/autoexpand_select.html View the page source code directly
http://bbs.csdn.net/topics/330158935 Pay attention to lingshuo1993's answer

<<: Detailed explanation of VUE Token's invalidation process

>>: Using CSS3 to achieve transition and animation effects

Example code for implementing a text marquee with CSS3

The current better way to make select list all options when selected/focused

Example code for implementing a text marquee with CSS3

A brief understanding of MySQL storage field type query efficiency

XHTML introductory tutorial: Web page Head and DTD

Example code for implementing the nine-grid layout of dynamic images with CSS

Detailed explanation of the binlog log analysis tool for monitoring MySQL: Canal

How to implement MySQL bidirectional backup

How to configure MySQL scheduled tasks (EVENT events) in detail

Attributes and usage of ins and del tags

Linux operation and maintenance basic process management and environment composition analysis

Sample code for deploying Spring-boot project with Docker

Recommend

MySQL 5.7 installation and configuration tutorial

MySQL 8.0.17 installation graphic tutorial

Vue implements login type switching

Detailed explanation of Linux using ss command combined with zabbix to monitor socket

VMware configuration hadoop to achieve pseudo-distributed graphic tutorial

WeChat applet uses the video player video component

Detailed tutorial on installing mysql on centos 6.9

How to use JSZip compression in CocosCreator

Example code of vue + element ui to realize player function

Why can't I see the access interface for Docker Tomcat?

Docker uses Supervisor to manage process operations

CenterOS7 installation and configuration environment jdk1.8 tutorial

Docker completes the implementation of FTP service construction with one line of command

MySQL Database Basics: A Summary of Basic Commands

Data URI and MHTML complete solution for all browsers