It is currently a better way to make select list all options when selected/focused_HTML/Xhtml_Web page production

During development, I encountered such a demand situation, so I recorded it for future reference

Requirement background

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

Technical Difficulties

Currently, browsers do not support positioning the drop-down list through code to list all the options under it. It can only be clicked with the mouse.

After searching for some information on the Internet, I came up with a better way to deal with it;

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

Copy code

The code is as follows:

Payment method:

RMB< ;/option>
USD
Credit Card
HKD
HKD

The expand and unexpand methods are both simple:

Copy the code

The code is as follows:

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

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

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

Reference information:

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