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