这段代码是在别人的基础上整理出来的，在IE和FF上面都不完善，FF上面可以弹出下拉列表，但是不能选择城市，在IE下面，显示的不是很好！~请大家一起来完美这段代码！/*
调用GetCityList(this)函数，传入的参数为输入框对象本身
*///*******通用函数开始********//
function $(objID) {
return document.getElementById(objID);
}/******提取某个对象，若不存在，则自动创建一个*******/
function C$(objID, objClass) {
var varDivObj = $(objID);
if (!varDivObj) {
varDivObj = document.createElement("div");
varDivObj.id = objID;
if (objClass && objClass != "") varDivObj.className = objClass;
document.body.appendChild(varDivObj);
}
return varDivObj;
}/******提取一个Iframe对象，若不存在，则创建一个Iframe对象*******/
function CIfm$(objID, objVisibility, objTop, objWidth, objLeft, objHeight) {
var varIfmObj = $(objID);
if (!varIfmObj) {
varIfmObj = document.createElement("iframe");
varIfmObj.id = objID;
varIfmObj.style.position = "absolute";
varIfmObj.style.zIndex = "1";
varIfmObj.style.visibility = "hidden";
document.body.appendChild(varIfmObj);
}
if (objVisibility) varIfmObj.style.visibility = (document.all ? objVisibility : "hidden");
if (objTop) varIfmObj.style.top = objTop + "px";
if (objHeight) varIfmObj.style.height = objHeight + "px";
if (objWidth) varIfmObj.style.width = objWidth + "px";
if (objLeft) varIfmObj.style.left = objLeft + "px"; return varIfmObj;
}/********取得某个对象坐标位置、宽、高********/
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 };
}/******自动触发下一个对象的事件******/
function AutoNextInputObj(varObj, varActFct) {
var varNextInput = varObj.getAttributeNode("next-Input");
if (varNextInput && varNextInput != "") {
if (document.all) {
eval("$('" + varNextInput.value + "')." + varActFct + "()");
}
else {
var evt = document.createEvent("MouseEvents");
evt.initEvent(varActFct, true, true);
$(varNextInput.value).dispatchEvent(evt);
}
$(varNextInput.value).foucs();
}
}/******给某对象的某事件增加处理函数AddFunToObj(document, "onclick", "alert('1');")******/
function AddFunToObj(varObj, varEvent, varFunction) {
if (varObj.addEventListener) {
varObj.addEventListener(varEvent.replace("on", ""), function(e) {
event.cancelBubble = !eval(varFunction);
}, false);
}
else if (varObj.attchEvent) {
varObj.attchEvent(varEvent, function() {
return eval(varFunction);
});
}
}
//*****通用函数结束******///*********城市选择*********/
/****城市下拉菜单CSS样式***/
document.write('\
<style type="text/css">\
#divAddressMenu {position:absolute;visibility:hidden;z-index:1;overflow:hidden;width:172px;background-color:#FFFFFF;border:solid #333333 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 {display:block;width:162px !important;width:100%;padding:1px 2px 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|阿克苏|AKU@Aletai|阿勒泰|AAT@Ankang|安康|AKA@Anqing|安庆|AQG@Anshun|安顺|AVA@Anting|安亭|594@Baise|百色|AEB@Baoshan|保山|BSD@Baotou|包头|BAV@Beihai|北海|BHY@Beijing|北京|BJS@Changchun|长春|CGQ@Changde|常德|CGD@Changdu|昌都|BPX@Changsha|长沙|CSX@Changzhi|长治|CIH@Changzhou|常州|CZX@Chaoyang|朝阳|CHG@Chengdu|成都|CTU@Chifeng|赤峰|CIF@Chongqing|重庆|CKG@Dali|大理|DLU@Dalian|大连|DLC@Dandong|丹东|DDG@Datong|大同|DAT@Daxian|达县|DAX@Dehong|德宏|LUM@Diqing|迪庆|DIG@Dongying|东营|DOY@Dunhuang|敦煌|DNH@Enshi|恩施|ENH@Fuyang|阜阳|FUG@Fuzhou|福州|FOC@Ganzhou|赣州|KOW@Geermu|格尔木|GOQ@Guanghan|广汉|GHN@Guanghua|光化|LHK@Guangzhou|广州|CAN@Guilin|桂林|KWL@Guiyang|贵阳|KWE@Haerbin|哈尔滨|HRB@Haikou|海口|HAK@Hailaer|海拉尔|HLD@Handan|邯郸|HDG@Hangzhou|杭州|HGH@Hanzhong|汉中|HZG@Hefei|合肥|HFE@Heihe|黑河|HEK@Hetian|和田|HTN@Hong Kong|香港|HKG@Huangshan|黄山|TXN@Huangyan|黄岩|HYN@Huhehaote|呼和浩特|HET@Jiamusi|佳木斯|JMU@Jiayuguan|嘉峪关|JGN@Jilin|吉林|JIL@Jinan|济南|TNA@Jingdezhen|景德镇|JDZ@Jinggangshan|井冈山|JGS@Jinghong|景洪|JHG@jinjiang|晋江|JJN@Jinzhou|锦州|JNZ@Jiujiang|九江|JIU@Jiuzhaigou|九寨沟|JZH@Kaohsiung|高雄|KHH@Kashi|喀什|KHG@Kelamayi|克拉玛依|KRY@Kuche|库车|KCA@Kuerle|库尔勒|KRL@Kunming|昆明|KMG@Lanzhou|兰州|LHW@Lasa|拉萨|LXA@LiangPing|梁平|LIA@Lianyungang|连云港|LYG@Lijiang|丽江|LJG@Lincang|临沧|LNJ@Linxi|林西|LXI@Linyi|临沂|LYI@Linzhi|林芝|LZY@LIPING|黎平|HZH@Liuzhou|柳州|LZH@LONGYAN|龙岩|LCX@Luoyang|洛阳|LYA@Luzhou|泸州|LZO@Macau|澳门|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|攀枝花|PZI@Qingdao|青岛|TAO@Qingyang|庆阳|IQN@Qinhuangdao|秦皇岛|SHP@Qiqihaer|齐齐哈尔|NDG@Quanzhou|泉州|JJN@Quzhou|衢州|JUZ@Sanya|三亚|SYX@Shanghai|上海|SHA@Shantou|汕头|SWA@Shashi|沙市|SHS@Shenyang|沈阳|SHE@Shenzhen|深圳|SZX@Shijiazhuang|石家庄|SJW@Shishi|石狮|JJN@Simao|思茅|SYM@Tacheng|塔城|TCG@Taipei|台北|TPE@Taiyuan|太原|TYN@Tianjin|天津|TSN@Tongliao|通辽|TGO@Tongren|铜仁|TEN@Wanxian|万州|WXN@Weifang|潍坊|WEF@Weihai|威海|WEH@Wenshan|文山|WNH@Wenzhou|温州|WNZ@Wuhai|乌海|WUA@Wuhan|武汉|WUH@Wulanhaote|乌兰浩特|HLH@Wulumuqi|乌鲁木齐|URC@Wuxi|无锡|WUX@Wuyishan|武夷山|WUS@Xiamen|厦门|XMN@Xian|西安|SIA@Xiangfan|襄樊|XFN@Xianggelila|香格里拉|DIG@Xichang|西昌|XIC@Xilinhaote|锡林浩特|XIL@Xingyi|兴义|ACX@Xining|西宁|XNN@Xishuangbanna|西双版纳|JHG@Xuzhou|徐州|XUZ@Yanan|延安|ENY@Yancheng|盐城|YNZ@Yanji|延吉|YNJ@Yantai|烟台|YNT@Yibin|宜宾|YBP@Yichang|宜昌|YIH@Yinchuan|银川|INC@Yining|伊宁|YIN@Yiwu|义乌|YIW@Yongzhou|永州|LLF@Yulin|榆林|UYN@Yuncheng|运城|YCU@Zhangjiajie|张家界|DYG@Zhanjiang|湛江|ZHA@Zhaotong|昭通|ZAT@Zhengzhou|郑州|CGO@zhijiang|芷江|HJJ@Zhongdian|中甸|DIG@Zhoushan|舟山|HSN@Zhuhai|珠海|ZUH@Wuzhou|梧州|WUZ@Eerduosi|鄂尔多斯|DSN@Nalati|那拉提|NLT@";
调用GetCityList(this)函数，传入的参数为输入框对象本身
*///*******通用函数开始********//
function $(objID) {
return document.getElementById(objID);
}/******提取某个对象，若不存在，则自动创建一个*******/
function C$(objID, objClass) {
var varDivObj = $(objID);
if (!varDivObj) {
varDivObj = document.createElement("div");
varDivObj.id = objID;
if (objClass && objClass != "") varDivObj.className = objClass;
document.body.appendChild(varDivObj);
}
return varDivObj;
}/******提取一个Iframe对象，若不存在，则创建一个Iframe对象*******/
function CIfm$(objID, objVisibility, objTop, objWidth, objLeft, objHeight) {
var varIfmObj = $(objID);
if (!varIfmObj) {
varIfmObj = document.createElement("iframe");
varIfmObj.id = objID;
varIfmObj.style.position = "absolute";
varIfmObj.style.zIndex = "1";
varIfmObj.style.visibility = "hidden";
document.body.appendChild(varIfmObj);
}
if (objVisibility) varIfmObj.style.visibility = (document.all ? objVisibility : "hidden");
if (objTop) varIfmObj.style.top = objTop + "px";
if (objHeight) varIfmObj.style.height = objHeight + "px";
if (objWidth) varIfmObj.style.width = objWidth + "px";
if (objLeft) varIfmObj.style.left = objLeft + "px"; return varIfmObj;
}/********取得某个对象坐标位置、宽、高********/
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 };
}/******自动触发下一个对象的事件******/
function AutoNextInputObj(varObj, varActFct) {
var varNextInput = varObj.getAttributeNode("next-Input");
if (varNextInput && varNextInput != "") {
if (document.all) {
eval("$('" + varNextInput.value + "')." + varActFct + "()");
}
else {
var evt = document.createEvent("MouseEvents");
evt.initEvent(varActFct, true, true);
$(varNextInput.value).dispatchEvent(evt);
}
$(varNextInput.value).foucs();
}
}/******给某对象的某事件增加处理函数AddFunToObj(document, "onclick", "alert('1');")******/
function AddFunToObj(varObj, varEvent, varFunction) {
if (varObj.addEventListener) {
varObj.addEventListener(varEvent.replace("on", ""), function(e) {
event.cancelBubble = !eval(varFunction);
}, false);
}
else if (varObj.attchEvent) {
varObj.attchEvent(varEvent, function() {
return eval(varFunction);
});
}
}
//*****通用函数结束******///*********城市选择*********/
/****城市下拉菜单CSS样式***/
document.write('\
<style type="text/css">\
#divAddressMenu {position:absolute;visibility:hidden;z-index:1;overflow:hidden;width:172px;background-color:#FFFFFF;border:solid #333333 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 {display:block;width:162px !important;width:100%;padding:1px 2px 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|阿克苏|AKU@Aletai|阿勒泰|AAT@Ankang|安康|AKA@Anqing|安庆|AQG@Anshun|安顺|AVA@Anting|安亭|594@Baise|百色|AEB@Baoshan|保山|BSD@Baotou|包头|BAV@Beihai|北海|BHY@Beijing|北京|BJS@Changchun|长春|CGQ@Changde|常德|CGD@Changdu|昌都|BPX@Changsha|长沙|CSX@Changzhi|长治|CIH@Changzhou|常州|CZX@Chaoyang|朝阳|CHG@Chengdu|成都|CTU@Chifeng|赤峰|CIF@Chongqing|重庆|CKG@Dali|大理|DLU@Dalian|大连|DLC@Dandong|丹东|DDG@Datong|大同|DAT@Daxian|达县|DAX@Dehong|德宏|LUM@Diqing|迪庆|DIG@Dongying|东营|DOY@Dunhuang|敦煌|DNH@Enshi|恩施|ENH@Fuyang|阜阳|FUG@Fuzhou|福州|FOC@Ganzhou|赣州|KOW@Geermu|格尔木|GOQ@Guanghan|广汉|GHN@Guanghua|光化|LHK@Guangzhou|广州|CAN@Guilin|桂林|KWL@Guiyang|贵阳|KWE@Haerbin|哈尔滨|HRB@Haikou|海口|HAK@Hailaer|海拉尔|HLD@Handan|邯郸|HDG@Hangzhou|杭州|HGH@Hanzhong|汉中|HZG@Hefei|合肥|HFE@Heihe|黑河|HEK@Hetian|和田|HTN@Hong Kong|香港|HKG@Huangshan|黄山|TXN@Huangyan|黄岩|HYN@Huhehaote|呼和浩特|HET@Jiamusi|佳木斯|JMU@Jiayuguan|嘉峪关|JGN@Jilin|吉林|JIL@Jinan|济南|TNA@Jingdezhen|景德镇|JDZ@Jinggangshan|井冈山|JGS@Jinghong|景洪|JHG@jinjiang|晋江|JJN@Jinzhou|锦州|JNZ@Jiujiang|九江|JIU@Jiuzhaigou|九寨沟|JZH@Kaohsiung|高雄|KHH@Kashi|喀什|KHG@Kelamayi|克拉玛依|KRY@Kuche|库车|KCA@Kuerle|库尔勒|KRL@Kunming|昆明|KMG@Lanzhou|兰州|LHW@Lasa|拉萨|LXA@LiangPing|梁平|LIA@Lianyungang|连云港|LYG@Lijiang|丽江|LJG@Lincang|临沧|LNJ@Linxi|林西|LXI@Linyi|临沂|LYI@Linzhi|林芝|LZY@LIPING|黎平|HZH@Liuzhou|柳州|LZH@LONGYAN|龙岩|LCX@Luoyang|洛阳|LYA@Luzhou|泸州|LZO@Macau|澳门|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|攀枝花|PZI@Qingdao|青岛|TAO@Qingyang|庆阳|IQN@Qinhuangdao|秦皇岛|SHP@Qiqihaer|齐齐哈尔|NDG@Quanzhou|泉州|JJN@Quzhou|衢州|JUZ@Sanya|三亚|SYX@Shanghai|上海|SHA@Shantou|汕头|SWA@Shashi|沙市|SHS@Shenyang|沈阳|SHE@Shenzhen|深圳|SZX@Shijiazhuang|石家庄|SJW@Shishi|石狮|JJN@Simao|思茅|SYM@Tacheng|塔城|TCG@Taipei|台北|TPE@Taiyuan|太原|TYN@Tianjin|天津|TSN@Tongliao|通辽|TGO@Tongren|铜仁|TEN@Wanxian|万州|WXN@Weifang|潍坊|WEF@Weihai|威海|WEH@Wenshan|文山|WNH@Wenzhou|温州|WNZ@Wuhai|乌海|WUA@Wuhan|武汉|WUH@Wulanhaote|乌兰浩特|HLH@Wulumuqi|乌鲁木齐|URC@Wuxi|无锡|WUX@Wuyishan|武夷山|WUS@Xiamen|厦门|XMN@Xian|西安|SIA@Xiangfan|襄樊|XFN@Xianggelila|香格里拉|DIG@Xichang|西昌|XIC@Xilinhaote|锡林浩特|XIL@Xingyi|兴义|ACX@Xining|西宁|XNN@Xishuangbanna|西双版纳|JHG@Xuzhou|徐州|XUZ@Yanan|延安|ENY@Yancheng|盐城|YNZ@Yanji|延吉|YNJ@Yantai|烟台|YNT@Yibin|宜宾|YBP@Yichang|宜昌|YIH@Yinchuan|银川|INC@Yining|伊宁|YIN@Yiwu|义乌|YIW@Yongzhou|永州|LLF@Yulin|榆林|UYN@Yuncheng|运城|YCU@Zhangjiajie|张家界|DYG@Zhanjiang|湛江|ZHA@Zhaotong|昭通|ZAT@Zhengzhou|郑州|CGO@zhijiang|芷江|HJJ@Zhongdian|中甸|DIG@Zhoushan|舟山|HSN@Zhuhai|珠海|ZUH@Wuzhou|梧州|WUZ@Eerduosi|鄂尔多斯|DSN@Nalati|那拉提|NLT@";
/****城市选择主函数****/
function GetCityList(varObj) {
var varCityMenu = C$("divAddressMenu");
var varThisObj = varObj;
var varThisObjValue = varThisObj.value;
var varThisObjAdd = (varThisObj.getAttributeNode("Default-Address") ? varThisObj.getAttributeNode("Default-Address").value : "");
var varFullObjAdd = (varThisObjValue == "" ? (varThisObjAdd == "" ? varAddress : varThisObjAdd) : varAddress);
var varHtmlStr;
var varCityDataSplit = varFullObjAdd.split("@");
var varCityDataSplitI;
//存储当前操作对象
varCityMenu.obj = varThisObj;
var varThisPageI = 0;
for (var i = 1; i < varCityDataSplit.length - 1; i++) {
varCityDataSplitI = varCityDataSplit[i];
if (varCityDataSplitI.toUpperCase().indexOf(varThisObjValue.toUpperCase()) >= 0 || varThisObjValue == "" || i == varThisObjValue) {
varThisPageI += 1;
varCityDataSplitISplit = varCityDataSplitI.split("|");
varHtmlStr += "<a href='javascript:;' onclick='WriteCity(" + varThisPageI + ")' id='menuA" + varThisPageI + "' title='" + varCityDataSplitI + "'><span>" + varCityDataSplitISplit[1] + "(" + varCityDataSplitISplit[2] + ")</span>" + varCityDataSplitISplit[0] + "</a>";
}
}
var varThisObjPosition = GetPosition(varThisObj); //取得事件发生处控件坐标
with (varCityMenu) {
style.top = varThisObjPosition.top + varThisObjPosition.height + "px";
style.left = varThisObjPosition.left + "px";
style.visibility = "visible";
innerHTML = "<div><h4>可输入城市拼音/汉字/三字码。</h4>" + (varHtmlStr == "" ? "<nobr>没有找到你查的信息‘" + varThisObjValue + "’。<nobr>" : varHtmlStr) + "</div>";
}
CIfm$("ifm" + varCityMenu.id, "visible", (varThisObjPosition.top + varThisObjPosition.height), varThisObjPosition.width, varThisObjPosition.left, varThisObjPosition.height);
return false;
}/*****选择某个城市****/
function WriteCity(fctI) {
var varCityMenu = C$("divAddressMenu");
var varThisObj = varCityMenu.obj;
var varCityMenuValue = $("MenuA" + fctI).title;
varCityMenuValue = varCityMenuValue.split("|");
varThisObj.value = varCityMenuValue[1];
var e = (document.all ? "" : e);
Hidden(e);
}/*****隐藏城市列表*****/
function Hidden(e) {
e = e ? e : event;
var varCityMenu = C$("divAddressMenu");
var varThisObj = varCityMenu.obj;
if (varCityMenu.style.visibility != "hidden") {
if (e) {
var EventObj = (e.srcElement ? e.srcElement : e.target);
if (varThisObj == EventObj || EventObj.id.indexOf("divAddressMenu") == 0) {
return false;
}
}
if (EventObj.id.indexOf("menuA") < 0) {
if (varThisObj) varThisObj.value = "";
}
varCityMenu.style.visibility = "hidden";
CIfm$("ifm" + varCityMenu.id, "hidden");
}
}