Although it is difficult to implement it, if you use the built-in Select statement, it is very easy to complete, but this code is actually telling you a practical application of Js in the web page, the combination of multiple elements.
The effect is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> drop-down select box </title> <meta http-equiv = "content-type" content = "text/html; charset = gb2312 "> <style type =" text/css "> body {margin: 20px auto; font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 950px; height: 400px; border: solid 1px # aaa; position: relative; padding: 10px;} h1 {font-size: 12px; color: #444 ;} ul {margin: 0; padding: 0; list-style: none ;}. dropDownList {position: absolute; left: 100px; top: 100px ;}. dropDownList div. dropdown {float: left; margin-right: 120px ;}. dropDownList span {display: block; width: 146px; height: 26px; background: url (/upload/2010-3/20100303231959754. gif) left top no-repeat; line-height: 26px; text-indent: 12px; border: solid 1px #83BBD9; cursor: default ;}. dropDownList span. over {background-position: left bottom; border-color: # B4C91A ;}. dropDownList ul {width: 200px; display: none; position: absolute ;}. dropDownList ul li {background: # eee; height: 20px; width: 100%; padding: 3px 0; text-indent: 12px; cursor: default; line-height: 20px ;} /* Common style */. dropDownList ul li. normal {background: # eee;}/* move the mouse over the style */. dropDownList ul li. over {background: # ccc;}/* selected style */. dropDownList ul li. current {background: # c2c2c2; font-weight: bold ;}. dropDownList ul. show {display: block ;}</style> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]