Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>Test</title></head><body><input type="text" id="x" /><script type="text/javascript">Function $ (o) {return document. getElementById (o);} var Test = {obj: null, div: null, arr: [// expand this part by yourself ['Beijing'], ['Shanghai'], ['hubei ', 'Wuhan', 'xiaogan ', 'jingzhou', 'huangshi ', 'xiangfan'], ['hunan ', 'Changsha', 'xiangtan ', 'chenzhou '], ['Guangdong', 'Guangzhou ', 'Shenzhen', 'zhaoqing ', 'shantou'], ['heilongjiang ', 'Harbin', 'daqing ', 'qiqihar ', 'jiamusi'], Show: function (o) {this. obj = o; this. close (); var d = document. createElement ('div '); this. div = d; with (d. style) {width = '350px '; height = 'auto'; border = '1px solid # cccccc'; position = 'absolute'; left = o. offsetLeft + 'px '; top = o. offsetTop + o. offsetHeight + 'px '; padding = '10px'; fontSize = '12px '; lineHeight = '24px';} var e = document. createElement ('div '); for (var I = 0; I <this. arr. length; I ++) {e. innerHTML + = ''+ this. arr [I] [0] + '';} d. appendChild (e); var f = document. createElement ('div '); d. appendChild (f); var g = f. cloneNode (true); g. innerHTML = 'close'; d. appendChild (g); document. body. appendChild (d) ;}, ShowCity: function (I) {if (this. arr [I]. length = 1) return Test. setCity (this. arr [I] [0]); for (var k = 1; k <this. arr [I]. length; k ++) {this. div. childNodes [1]. innerHTML + = ''+ this. arr [I] [k] + ''; }}, SetCity: function (s) {this. obj. value = s; this. close () ;}, Close: function () {if (this. div) {this. div. parentNode. removeChild (this. div); this. div = null ;}};$ ('x '). onclick = function () {Test. show (this );}</script></body></html>
Tip: you can modify some code before running