The code can be more concise, and more convenient methods are welcome to contribute.
<! 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> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <title> the input box prompts the list effect _ script home </title> <style type =" text/css "> </style> </pead> <body> location: <input type = "text" id = "txt" name = "txt" onClick = "showAndHide ('list1', 'show '); "onblur =" showAndHide ('list1', 'hide '); "> <ul> <li onmousedown =" getValue ('txt', 'China China '); showAndHide ('list1', 'hide '); "> CHINA </li> <li onmousedown =" getValue ('txt', 'USA USA '); showAndHide ('list1', 'hide '); "> USA </li> </ul> Sex: <input type = "text" id = "txt2" name = "txt2" onClick = "showAndHide ('list2', 'show '); "onblur =" showAndHide ('list2', 'hide '); "> <ul> <li onmousedown =" getValue ('txt2', 'male '); showAndHide ('list2', 'hide '); "> Male </li> <li onmousedown =" getValue ('txt2', 'female Female '); showAndHide ('list2', 'hide '); "> Female </li> </ul> education: <input type = "text" id = "txt3" name = "txt3" onClick = "showAndHide ('list3', 'show '); "onblur =" showAndHide ('list3', 'hide '); "> <ul> <li onmousedown =" getValue ('txt3', 'Junior College '); showAndHide ('list3', 'hide '); "> Junior College </li> <li onmousedown =" getValue ('txt3', 'bachelor '); showAndHide ('list3 ', 'hide '); "> undergraduate </li> <li onmousedown =" getValue ('txt3', 'master'); showAndHide ('list3', 'hide '); "> master </li> <li onmousedown =" getValue ('txt3 ', ''); showAndHide ('list3', 'hide '); "> undergraduate </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]