Tip: you can modify some code before running
<pead><style type="text/css">Body {font-family: ""; font-size: 12px ;}</style><title>Test</title><script type="text/javascript">// ************ Common functions (from pyzy.net) sta huzj ************* // function $ (fctId) {return document. getElementById (fctId);} // retrieves an object. If the object under the provided ID does not exist, function c $ (fctId, fctClassName) is automatically created {var varTempDivObj =$ (fctId ); if (! VarTempDivObj) {GetPyzyIframe ("ifm" + fctId); varTempDivObj = document. createElement ("div"); varTempDivObj. id = fctId; if (fctClassName & fctClassName! = "") VarTempDivObj. className = fctClassName; document. body. appendChild (varTempDivObj);} return varTempDivObj;} // gets the iframe object of an ID. If no object of this ID exists, the function GetPyzyIframe (fctIfmId, fctVisibility, fctTop, fctLeft, fctWidth, fctHeight) {var varTempIfmObj =$ (fctIfmId); if (! VarTempIfmObj) {varTempIfmObj = document. createElement ("iframe"); varTempIfmObj. id = fctIfmId; varTempIfmObj. style. position = "absolute"; varTempIfmObj. style. zIndex = "1"; varTempIfmObj. style. visibility = "hidden"; document. body. appendChild (varTempIfmObj);} if (fctTop) varTempIfmObj. style. top = fctTop + "px"; if (fctLeft) varTempIfmObj. style. left = fctLeft + "px"; if (fctWidth) varTempIfmObj. style. width = fctWidth + "px"; if (fctHeight) VarTempIfmObj. style. height = fctHeight + "px"; if (fctVisibility) varTempIfmObj. style. visibility = (document. all? FctVisibility: "hidden"); return varTempIfmObj;} // Obtain the coordinate position, width, and height of an object. function getPosition (obj) {var top = 0; var left = 0; var width = obj. offsetWidth; var height = obj. offsetHeight; while (obj. offsetParent) {top + = obj. offsetTop; left + = obj. offsetLeft; obj = obj. offsetParent;} return {"top": top, "left": left, "width": width, "height": height };} // Get the encoding storage box object function GetValueToInputObj (fctThisObj) {if (! FctThisObj) return null; var varThisObjAutoInput = (fctThisObj. getAttributeNode ("value_to_input ")? FctThisObj. getAttributeNode ("value_to_input "). value: ""); if (varThisObjAutoInput = "") return null; return $ (varThisObjAutoInput);} // automatically triggers the Act event function AutoNextInputAct (fctThisObj, fctAct) of the next object) {var varNextInput = fctThisObj. getAttributeNode ("nextinput"); if (varNextInput & varNextInput! = "") {If (document. all) {eval ("$ ('" + varNextInput. value + "'). "+ fctAct +" () ");} else {var evt = document. createEvent ("MouseEvents"); evt. initEvent (fctAct, true, true); $ (varNextInput. value ). dispatchEvent (evt);} $ (varNextInput. value ). focus () ;}// add the processing function AddFunToObj (document, "onclick", "alert ('1');") function AddFunToObj (fctObj, fctAct, fctFunction) {if (fctObj. addEventListener ){//! Fcietobj. addEventListener (fctAct. replace ("on", ""), function (e) {e. cancelBubble =! Eval (fctFunction) ;}, false) ;}else if (fctObj. attachEvent) {// IEfctObj. attachEvent (fctAct, function () {return eval (fctFunction );});}} ************///****** * ** city list function Sta huzj **************** // output the city list menu CSS style huzj document.write ('<style type="text/css">Body {background-color: # efefef;} # divAddressMenu {position: absolute; visibility: hidden; z-index: 1; overflow: hidden; width: 172px; background-color: # FFFFFF; border: solid # EBcccC 1px; font-size: 12px;} # divAddressMenu h4 {border-bottom: dotted # CCCCCC 1px; color: #999999; font-size: 12px; font-weight: 100; padding: 2px 2px 0 2px; margin: 0 ;}# divAddressMenu div {border: solid # FC7A7D 1px; padding: 1px ;} # divAddressMenu a {disp Lay: block; width: 162px! Important; width: 100%; padding: 1px 2px 2px; cursor: default; text-decoration: none; color: #990000; border: solid # ffffff 1px; background-color: none ;}# divAddressMenu a span {float: right ;}# divAddressMenu a: hover {border: solid # F2C2BD 1px; background-color: # FBEDEC ;}</style>'); Var varAddress = "@ Akesu | Aksu | AKU @ Aletai | Altay | AAT @ Ankang | AKA @ Anqing | AQG @ Anshun | AVA @ Anting | 594 @ Baise | AEB @ Baoshan | BSD @ Baotou | BAV @ Beihai | BHY @ Beijing | BJS @ Changchun | CGQ @ Changde | Changde | CGD @ Changdu | BPX @ Changsha | CSX @ Changzhi | CIH @ Changzhou | CZX @ Chaoyang | CHG @ Chengdu | CTU @ Chifeng | Chifeng | CIF @ Chongqing | CKG @ Dali | DLU @ Dalian | DLC @ Dandong | DDG @ Datong | DAT @ Daxian | D AX @ Dehong | LUM @ Diqing | DIG @ Dongying | DOY @ Dunhuang | DNH @ Enshi | ENH @ Fuyang | FUG @ Fuzhou | fuzhou | FOC @ Ganzhou | KOW @ Geermu | Golmud | GOQ @ Guanghan | GHN @ Guanghua | Guang Hua | LHK @ Guangzhou | CAN @ Guilin | KWL @ guiyang | KWE @ Haerbin | Harbin | HRB @ Haikou | HAK @ Hailaer | Hailar | HLD @ Handan | HDG @ Hangzhou | HGH @ Hanzhong | HZG @ Hefei | HFE @ Heihe | HEK @ Hetian | Hotan | HTN @ Hong Kong | HKG @ Huangshan | TXN @ Huangyan | HYN @ Huheha Ote | Hohhot | HET @ Jiamusi | JMU @ Jiayuguan | JGN @ Jilin | JIL @ Jinan | TNA @ Jingdezhen | JDZ @ Jing Okayama | JGS @ Jinghong | Jing Hong | JHG @ jinjiang | JJN @ Jinzhou | JNZ @ Jiujiang | JIU @ JIU | Jiuzhaigou | JZH @ Kaohsiung | KHH @ Kashi | kashgar | KHG @ Kelamayi | Karamay | KRY @ Kuche | Kuqa | KCA @ Kuerle | Korla | KRL @ Kunming | KMG @ Lanzhou | LHW @ Lasa | Lhasa | LXA @ liangPing | LIA @ Lianyungang | LYG @ Lijiang | LJG @ Lincang | LNJ @ Linxi | LXI @ Linyi | Lin California | LYI @ Linzhi | Nyingchi | LZY @ LIPING | HZH @ Liuzhou | LZH @ LONGYAN | LCX @ Luoyang | LYA @ Luzhou | LZO @ macau | Macao | MFM @ Mangshi | LUM @ Manzhouli | NZH @ Meixian | MXZ @ Mianyang | MIG @ Mudanjiang | MDG @ Nanchang | KHN @ Nanchong | NAO @ Nanjing | NKG @ Nanning | NNG @ Nantong | NTG @ Nanyang | NNY @ Ningbo | NGB @ Panzhihua | panzhihua | PZI @ Qingdao | TAO @ Qingyang | IQN @ Qinhuangdao | SHP @ Qiqihaer | Qiqihar | NDG @ Quanzhou | JJN @ Qu Zhou | Quzhou | JUZ @ Sanya | SYX @ Shanghai | SHA @ Shantou | SWA @ Shashi | SHS @ Shenyang | SHE @ Shenzhen | SZX @ Shijiazhuang | SJW @ Shishi | Shi | JJN @ Simao | SYM @ Tacheng | TCG @ Taipei | TPE @ Taiyuan | TYN @ Tianjin | tianjin | TSN @ Tongliao | TGO @ Tongren | TEN @ Wanxian | Wanzhou | WXN @ Weifang | WEF @ Weihai | WEH @ Wenshan | WNH @ wenzhou | WNZ @ Wuhai | WUA @ Wuhan | WUH @ Wulanhaote | Ulanhot | HLH @ Wulumuqi | Urumqi | URC @ Wuxi | WUX @ Wuyishan | Yi Shan | WUS @ Xiamen | XMN @ Xian | Xi'an | SIA @ Xiangfan | XFN @ Xianggelila | Shangri-La | DIG @ Xichang | XIC @ Xilinhaote | Xilinhot | XIL @ Xingyi | ACX @ Xining | XNN @ Xishuangbanna | JHG @ Xuzhou | XUZ @ Yanan | Yan'an | ENY @ Yancheng | YNZ @ Yanji | Yanji | YNJ @ Yantai | YNT @ Yibin | YBP @ Yichang | YIH @ Yinchuan | INC @ Yining | YIN @ Yiwu | YIW @ Yongzhou | Yongzhou | LLF @ Yulin | UYN @ Yuncheng | YCU @ Zhangjiajie | DYG @ Zhanjiang | ZHA @ Zhaotong | ZAT @ Zhengz Hou | Zhengzhou | CGO @ zhijiang | Zhujiang | HJJ @ Zhongdian | DIG @ Zhoushan | HSN @ Zhuhai | ZUH @ Wuzhou | WUZ @ Eerduosi | Erdos | DSN @ Nalati | NLT @"; var varPageId = 0; // The function GetCityList (fctThisObj) {var varMenuObj = c $ ("divAddressMenu"); var varThisObj = fctThisObj; if (varThisObj. id = "menuPageS" | varThisObj. id = "menuPageE") {varThisObj = varMenuObj. obj;} else {varPageId = 0;} // clear the selected city Valuevar varThisObjAutoInput = GetValueToI NputObj (varThisObj); // Obtain the city code value storage object if (varThisObjAutoInput) varThisObjAutoInput. value = ""; // Obtain City data and split it into an array var varObjValue = varThisObj. value; var varThisObjAdd = (varThisObj. getAttributeNode ("mod_address_suggest ")? VarThisObj. getAttributeNode ("mod_address_suggest"). value: ""); var varData = (varObjValue = ""? (VarThisObjAdd = ""? VarAddress: varThisObjAdd): varAddress); var varHtmlStr = "", varCityDataSplit = varData. split ("@"), varCityDataSplitI, varCityDataSplitIu, varNextPageStr = ""; // stores the current operation object varMenuObj. obj = varThisObj; var varPageRCount = (varThisObj. getAttributeNode ("pagecount ")? ParseInt (varThisObj. getAttributeNode ("pagecount"). value, 10): 18); var varThisPageI = 0for (var I = 1; I<varCityDataSplit.length-1;i++){varCityDataSplitI=varCityDataSplit[i];if(varCityDataSplitI.toUpperCase().indexOf(varObjValue.toUpperCase())>= 0 | varObjValue = "" | I = varObjValue) {// | varCityDataSplitI. toLowerCase (). indexOf (varObjValue. toLowerCase ()> = 0 varThisPageI + = 1; if (varThisPageI> varPageId * varPageRCount & varThisPageI <= (varPageId + 1) * varPageRCount) {region = varCityDataSplitI. split ("|"); varHtmlStr + = "" + varCityDataSplitISplit [1] + "(" + varCityDataSplitISplit [2] + ") "+ varCityDataSplitISplit [0] +" ";}}}if (varThisPageI> varPageRCount) {varNextPageStr ="<b id=menuPageS cursor:pointer;":"color:#666666;")+"><Previous Page</b>"VarNextPageStr + ="<b id=menuPageE cursor:pointer;":"color:#666666;")+">Next >>></b>";} Var varThisObjPosition = getPosition (varThisObj); // Obtain the control coordinate at event occurrence with (varMenuObj) {style. top = varThisObjPosition. top + varThisObjPosition. height + "px"; style. left = varThisObjPosition. left + "px"; style. visibility = "visible"; innerHTML ="<div><p>You can enter the city pinyin/Chinese character/three character code.</p>"+ (VarHtmlStr = ""? "<nobr>The information '"+ varObjValue +"' is not found "'.</nobr>": VarHtmlStr + varNextPageStr) +"</div>";} GetPyzyIframe (" ifm "+ varMenuObj. id, "visible", (varThisObjPosition. top + varThisObjPosition. height), varThisObjPosition. left, varMenuObj. offsetWidth, varMenuObj. offsetHeight); // Obtain Iframereturn false;} // select a city function WriteCity (fctI) {var varMenuObj = c $ ("divAddressMenu"); var varThisObj = varMenuObj. obj; var varMenuValue = $ ("menuA" + fctI ). title; varMenuValue = varMenuValue. split ("|"); varThisObj. value = varMenuValue [1]; Var varThisObjAutoInput = GetValueToInputObj (varThisObj); // get the city code value storage object if (! VarThisObjAutoInput) varThisObjAutoInput = varThisObj; varThisObjAutoInput. value = varMenuValue [2]; if (typeof (fctI) = "number") AutoNextInputAct (varThisObj, "click"); // _ Hidden ("1 ");} // hide the city list function _ Hidden (e) {e = e? E: event; var varMenuObj = c $ ("divAddressMenu"); var varThisObj = varMenuObj. obj; if (varMenuObj. style. visibility! = "Hidden") {if (e) {var EventOBJ = (e. srcElement? E. srcElement: e.tar get); if (EventOBJ. id = "menuPageS" & EventOBJ. style. color = "") {// if the previous page is clicked, flip up varPageId = varPageId-1; GetCityList (EventOBJ);} if (EventOBJ. id = "menuPageE" & EventOBJ. style. color = "") {// if the vertex is "next page", go down to varPageId = varPageId + 1; GetCityList (EventOBJ );} if (varThisObj = EventOBJ | EventOBJ. id. indexOf ("menuPage") = 0 | EventOBJ. id. indexOf ("divAddressMenu") = 0) return false;} var varThisObjAut OInput = GetValueToInputObj (varThisObj); // get the city code value storage object if ($ ("menuA1") {// if the first city if (! VarThisObjAutoInput) varThisObjAutoInput = varThisObj; if (varThisObjAutoInput. value = "" | varThisObjAutoInput = varThisObj) {// no value in the encoding box WriteCity ("1") ;}} else if (EventOBJ. id. indexOf ("menuA") <0) {// if the specified city does not exist in the drop-down list, if (varThisObj) varThisObj. value = "";} varMenuObj. style. visibility = "hidden"; GetPyzyIframe ("ifm" + varMenuObj. id, "hidden ");}} /*********** city list function End huzj *************//******** ** calendar selection function End huzj 2008-4-14 *************** // output the calendar style sheet huzj 2008-4-12document.write ('<style type="text/css">. DateListBox {float: left; border: solid # FC7A7D 1px; width: 147px! Important; width: 142px; height: 168px! Important; height: 176px; font-size: 12px; text-align: center ;}. dateListBox h1 {width: 100%; background-color: # FFF4F4; color: # B42929; font-size: 12px; height: 20px; font-weight: bold; line-height: 20px; vertical-align: middle; margin: 0px ;}. dateListBox div {float: left; border: solid # EB696C 1px; background-color: # EB696C; color: # FFFFFF; width: 19px! Important; width: 20px; height: 20px; font-size: 12px; font-weight: bold; line-height: 20px; vertical-align: middle ;}. dateListBox a {float: left; color: #990000; border: solid # ffffff 1px; background-color: # ffffff; width: 19px! Important; width: 20px; height: 19px! Important; height: 22px; font-size: 12px; line-height: 20px; vertical-align: middle ;}. dateListBox a: hover {border: solid # F2C2BD 1px; background-color: # FBEDEC ;}. dateListBox. aSelect {cursor: pointer; border: solid # DEB4B4 1px; background-color: # FAE0CF; color: # FF0000 ;}. pyzyDateBox {position: absolute; z-index: 1; visibility: hidden; background-color: # FFFFFF; border: solid # EBcccC 1px; height: 170px; width: 298px! Important; width: 286px ;}</style>'); // Gets the calendar list. The output content of this function needs to be placed in a specific container as needed, such as floating layer, fixed DIV... Function GetMonthHTML (fctStaDate, fctDate) {if (! FctDate) fctDate = new Date (); // The default value is the current Date var varYear = fctDate. getFullYear (); var varMonth = fctDate. getMonth (); var varNextMonth = new Date (varYear, varMonth +); var varThisMonthButDay = new Date (varNextMonth-86400000); // The last day of the month var varThisDate, varThisWeekDay, varThisMonthHTML = ""; varThisMonthHTML ++ ="<p>"+ VarYear +" year "+ (varMonth + 1) +" month</p>"VarThisMonthHTML + ="<div>Day</div><div>I</div><div>II</div><div>3.</div><div>Thu</div><div>V.</div><div>Sat.</div>"For (var DayI = 1; DayI <= varThisMonthButDay. getDate (); DayI ++) {varThisDate = new Date (varYear, varMonth, DayI); varThisWeekDay = varThisDate. getDay (); if (DayI = 1) {for (var spcI = 0; spcI<varThisWeekDay;spcI++){varThisMonthHTML+="<a>"}}varThisMonthHTML+=""+DayI+"";}return '<div class="DateListBox">'+ VarThisMonthHTML +'</div>';} // Select the date function SelectDate (fctAObj) {if (fctAObj. href | fctAObj. className = "aSelect") {var varValueObj = $ ("divPyzyDateBox "). obj; var varvalu1_bj = GetValueToInputObj (varValueObj); if (varvalu1_bj) varValueObj = varvalu1_bj; if (varValueObj. value = fctAObj. title) {varValueObj. value = "";} else {varValueObj. value = fctAObj. title ;}$ ("divPyzyDateBox "). style. visibility = "hidden"; $ ("divPyzyDateBox "). bodyclick = ""; GetPyzy Iframe ("ifmdivPyzyDateBox", "hidden"); AutoNextInputAct ($ ("divPyzyDateBox "). obj, "click") ;}}// hide the calendar function HiddenDateBox () {if ($ ("divPyzyDateBox") {if ($ ("divPyzyDateBox "). style. visibility! = "Hidden" & $ ("divPyzyDateBox "). bodyclick = "1") {$ ("divPyzyDateBox "). style. visibility = "hidden"; $ ("divPyzyDateBox "). bodyclick = ""; GetPyzyIframe ("ifmdivPyzyDateBox", "hidden");} else {$ ("divPyzyDateBox "). bodyclick = "1" ;}}// display the calendar function ShowTwoMonthList (fctThisObj, fctJNum, fctStaDate) {if (! FctJNum) fctJNum = 0; if (! FctThisObj) fctThisObj = ""; var varStaDate = null, varTheDate = new Date (); if (fctStaDate | fctStaDate = "") {varStaDate = new Date () -86400000); // if no specific start time can be defined, the custom value is today var varstadatesp1_= fctStaDate. split ("-"); if (varStaDateSplit. length = 3) {varStaDate = new Date (varStaDateSplit [0], parseInt (varStaDateSplit [1], 10)-1, varStaDateSplit [2]); // fctStaDate = new Date ();} varTheDate = varStaDate; if (fctStaDate = "") fctSta Date = varStaDate. getFullYear () + "-" + (varStaDate. getMonth () + 1) + "-" + varStaDate. getDate ();} var varShowTwoMonthHTML = ""; for (var I = 0 + fctJNum; I <2 + fctJNum; I ++) {varShowTwoMonthHTML + = GetMonthHTML (varStaDate? VarStaDate: ""), new Date (varTheDate. getFullYear (), varTheDate. getMonth () + I, 1);} if (varStaDate) varShowTwoMonthHTML = varShowTwoMonthHTML. replace (/old href/g, "style = color: #999 old"); if (fctThisObj. value! = "") {// Change the selected date style if (/^ (d {4}) | (d {2})-(d {1, 2 }) -(d {1, 2}) $/g. test (fctThisObj. value) varShowTwoMonthHTML = varShowTwoMonthHTML. replace (fctThisObj. value, fctThisObj. value + "'class = 'aselect");} var varDateBoxObj = c $ ("divPyzyDateBox", "PyzyDateBox"); varDateBoxObj. bodyclick = ""; if (fctThisObj! = "") {// Adjust coordinates to the appropriate position var varThisObjPosition = getPosition (fctThisObj); varDateBoxObj. style. top = (varThisObjPosition. top + varThisObjPosition. height) + "px"; varDateBoxObj. style. left = varThisObjPosition. left + "px"; varDateBoxObj. style. visibility = "visible"; // hiddenvarDateBoxObj. obj = fctThisObj;} varDateBoxObj. innerHTML = varShowTwoMonthHTML +'<div +(document.all?'-177':'-1')+'px;color:#B42929;font-size:12px;font-weight:bold;line-height:24px;vertical-align:bottom;"> <----></div>';GetPyzyIframe("ifmdivPyzyDateBox","visible",(varThisObjPosition.top+varThisObjPosition.height),varThisObjPosition.left,varDateBoxObj.offsetWidth,varDateBoxObj.offsetHeight); //取Iframe}/**********日历选择功能 End huzj 2008-4-14*************///为window.onload增加一个为document增加onclick处理函数的函数(^_^)huzj 2008-4-14AddFunToObj(window,"onload","AddFunToObj(document,'onclick','_Hidden("+(document.all?"":"e")+");HiddenDateBox();');");</script></pead><body>已通过测试的浏览器：IE6、IE7、FF<div >编码存储域：<input name="cityCode" id="cityCode" value=""/><br />城市1：<input name="dest_city_1" id="dest_city_1" type="text" value="" size="10"onclick="GetCityList(this)"onkeyup="GetCityList(this)"value_to_input="cityCode"nextinput="dest_city_2"mod_address_suggest="@Xian|西安|SIA@Beijing|北京|BJS@Shanghai|上海|SHA@Shenzhen|深圳|SZX@Guangzhou|广州|CAN@Qingdao|青岛|TAO@Chengdu|成都|CTU@Hangzhou|杭州|HGH@Wuhan|武汉|WUH@Tianjin|天津|TSN@Dalian|大连|DLC@Xiamen|厦门|XMN@Chongqing|重庆|CKG@" />有指定默认城市列表，选择完成后自动跳转到下一城市选择对象<br />城市2：<input name="dest_city_2" id="dest_city_2" type="text" value="" size="10"onclick="GetCityList(this)"onkeyup="GetCityList(this)"pagecount="5"/>未指定默认城市列表，未指定城市值存储域，设置了每页显示城市数量为5个<div id="div1" ></div><br /><br />日期1：<input type="text" name="textfield1" id="textfield1" nextinput="textfield2" onClick="ShowTwoMonthList(this,0,'thisDay');" value=""/> 当前日期为最后可用日期，该项选择完成后自动跳转到下一日期项<br />日期2：<input type="text" name="textfield2" id="textfield2" nextinput="textfield3" onClick="ShowTwoMonthList(this,0,$('textfield1').value);"/> 上一关联日期为最终可用日期 <br />日期3：<input type="text" name="textfield3" id="textfield3" onClick="ShowTwoMonthList(this,0);"/>无任何限制，所有日期均可用<br />日期4：<input type="text" name="textfield4" id="textfield4" /><input type="button" name="btn" value="选择日期" value_to_input="textfield4" onClick="ShowTwoMonthList(this,0);"/>点相关图标或按钮选择日期<br />测试覆盖：<select name="select"><option>测试层是否能盖住下拉菜单</option></select><br />在日历中点击已选日期，自动切换取消选择。www.111cn.net</div></body>
提示：您可以先修改部分代码再运行
