Make the select statement list all options when selecting/focusing. Currently, it is better to use the _ HTML/Xhtml _ webpage creation method.

Source: Internet
Author: User
On the page, use the shortcut keyboard to quickly locate the payment method selection box (a drop-down list) and select it. After finding some information on the Internet, it is concluded that the current good processing method is shared with you here. I hope it will help you in the Development and encounter such a requirement. Therefore, record it as a backup

Background

On the page, use the shortcut keyboard to quickly locate the payment method selection box (a drop-down list) and select.

Technical difficulties

Currently, the browser does not support listing all the options under the drop-down list by using the code. You can only click it with the mouse.

After finding some information on the Internet, we can find a better solution;

The select size attribute is used in combination with the position attribute of the box layout. The specific code is as follows:

The Code is as follows:



Payment Method:




RMB USD Credit Card Hong Kong dollar Hong Kong dollar




The expand and unexpand methods are simple:

The Code is as follows:


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


Set the position of the select statement to absolute so that it does not affect the dom stream layout. Set the position of the container to relative so that select can be located based on the container.

Note that p must be used as the select container in the table element, because according to w3c css standards, position: relative is undefined in the table-related elements, therefore, the select element in ff will be located directly based on the body element.

References:

Http://www.php-insite.com/autoexpand_select.html directly view the page source code
Http://bbs.csdn.net/topics/330158935 pay attention to lingshuo1993 answer

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.