网站下拉菜单，选择下拉后自动填充(图)

http://www.corange.cn//uploadfiles/00000_82778.jpg

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>模仿某招聘网站的Js搜索菜单</title>
</head>
<scriptlanguage="JavaScript"type="text/javascript">
//----------------------------

//省
varData_Area_Province=newArray("安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西","陕西","上海","四川","天津","西藏","新疆","云南","浙江","重庆");
//市区
varData_Area_City=newArray();
Data_Area_City[0]=newArray("安庆","蚌埠","巢湖","池州","滁州","阜阳","合肥","淮北","淮南","黄山","六安","马鞍山","宿州","铜陵","芜湖","宣城","亳州");
Data_Area_City[1]=newArray("北京");
Data_Area_City[2]=newArray("福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州");
Data_Area_City[3]=newArray("白银","定西","甘南藏族自治州","嘉峪关","金昌","酒泉","兰州","临夏回族自治州","陇南","平凉","庆阳","天水","武威","张掖");
Data_Area_City[4]=newArray("潮州","东莞","佛山","广州","河源","惠州","江门","揭阳","茂名","梅州","清远","汕头","汕尾","韶关","深圳","阳江","云浮","湛江","肇庆","中山","珠海");
Data_Area_City[5]=newArray("百色","北海","崇左","防城港","桂林","贵港","河池","贺州","来宾","柳州","南宁","钦州","梧州","玉林");
Data_Area_City[6]=newArray("安顺","毕节","贵阳","六盘水","黔东南苗族侗族自治州","黔南布依族苗族自治州","黔西南布依族苗族自治州","铜仁","遵义");
Data_Area_City[7]=newArray("白沙黎族自治县","保亭黎族苗族自治县","昌江黎族自治县","澄迈县","定安县","东方","海口","乐东黎族自治县","临高县","陵水黎族自治县","琼海","琼中黎族苗族自治县","三亚","屯昌县","万宁","文昌","五指山","儋州");
Data_Area_City[8]=newArray("保定","沧州","承德","邯郸","衡水","廊坊","秦皇岛","石家庄","唐山","邢台","张家口");
Data_Area_City[9]=newArray("安阳","鹤壁","济源","焦作","开封","洛阳","南阳","平顶山","三门峡","商丘","新乡","信阳","许昌","郑州","周口","驻马店","漯河","濮阳");
Data_Area_City[10]=newArray("大庆","大兴安岭","哈尔滨","鹤岗","黑河","鸡西","佳木斯","牡丹江","七台河","齐齐哈尔","双鸭山","绥化","伊春");
Data_Area_City[11]=newArray("鄂州","恩施土家族苗族自治州","黄冈","黄石","荆门","荆州","潜江","神农架林区","十堰","随州","天门","武汉","仙桃","咸宁","襄樊","孝感","宜昌");
Data_Area_City[12]=newArray("常德","长沙","郴州","衡阳","怀化","娄底","邵阳","湘潭","湘西土家族苗族自治州","益阳","永州","岳阳","张家界","株洲");
Data_Area_City[13]=newArray("白城","白山","长春","吉林","辽源","四平","松原","通化","延边朝鲜族自治州");
Data_Area_City[14]=newArray("常州","淮安","连云港","南京","南通","苏州","宿迁","泰州","无锡","徐州","盐城","扬州","镇江");
Data_Area_City[15]=newArray("抚州","赣州","吉安","景德镇","九江","南昌","萍乡","上饶","新余","宜春","鹰潭");
Data_Area_City[16]=newArray("鞍山","本溪","朝阳","大连","丹东","抚顺","阜新","葫芦岛","锦州","辽阳","盘锦","沈阳","铁岭","营口");
Data_Area_City[17]=newArray("阿拉善盟","巴彦淖尔盟","包头","赤峰","鄂尔多斯","呼和浩特","呼伦贝尔","通辽","乌海","乌兰察布盟","锡林郭勒盟","兴安盟");
Data_Area_City[18]=newArray("固原","石嘴山","吴忠","银川");
Data_Area_City[19]=newArray("果洛藏族自治州","海北藏族自治州","海东","海南藏族自治州","海西蒙古族藏族自治州","黄南藏族自治州","西宁","玉树藏族自治州");
Data_Area_City[20]=newArray("滨州","德州","东营","菏泽","济南","济宁","莱芜","聊城","临沂","青岛","日照","泰安","威海","潍坊","烟台","枣庄","淄博");
Data_Area_City[21]=newArray("长治","大同","晋城","晋中","临汾","吕梁","朔州","太原","忻州","阳泉","运城");
Data_Area_City[22]=newArray("安康","宝鸡","汉中","商洛","铜川","渭南","西安","咸阳","延安","榆林");
Data_Area_City[23]=newArray("上海");
Data_Area_City[24]=newArray("阿坝藏族羌族自治州","巴中","成都","达州","德阳","甘孜藏族自治州","广安","广元","乐山","凉山彝族自治州","眉山","绵阳","南充","内江","攀枝花","遂宁","雅安","宜宾","资阳","自贡","泸州");
Data_Area_City[25]=newArray("天津");
Data_Area_City[26]=newArray("阿里","昌都","拉萨","林芝","那曲","日喀则","山南");
Data_Area_City[27]=newArray("阿克苏","阿拉尔","巴音郭楞蒙古自治州","博尔塔拉蒙古自治州","昌吉回族自治州","哈密","和田","喀什","克拉玛依","克孜勒苏柯尔克孜自治州","石河子","图木舒克","吐鲁番","乌鲁木齐","五家渠","伊犁哈萨克自治州");
Data_Area_City[28]=newArray("保山","楚雄彝族自治州","大理白族自治州","德宏傣族景颇族自治州","迪庆藏族自治州","红河哈尼族彝族自治州","昆明","丽江","临沧","怒江傈傈族自治州","曲靖","思茅","文山壮族苗族自治州","西双版纳傣族自治州","玉溪","昭通");
Data_Area_City[29]=newArray("杭州","湖州","嘉兴","金华","丽水","宁波","绍兴","台州","温州","舟山","衢州");
Data_Area_City[30]=newArray("重庆");
//学历
varData_School=newArray("初中","高中","中专","大专","本科","双学位","硕士","博士","博士以上");
//行业
varData_Industry=newArray("计算机类","电子/邮电/通讯类","经营/管理类","市场销售/营销类","金融/证券/保险类","财务类","工业/工厂类","技工类","机械/设备维修类","动力电气类","外语类","文教法律类","设计/广告类","行政/人事类","建筑/房地产/物业管理类","餐饮/娱乐类","交通运输（海陆空）类","化学工程类","轻工类","医院/医疗/护理/美容保健类","理科类","能源水利类","生物工程类","地矿冶金类","测绘技术类","喷涂/金属材料类","环境保护类","园林/园艺类","农林渔牧类","客户服务类","贸易类","服装/纺织/皮革/制鞋类","酒店/旅游后勤类","公关/媒介/广告类","百货/连锁/零售服务类","物流类","汽车类","其它类");
//时间
varData_Date=newArray("今天","三天内","一个星期内","半个月内","一个月内","三个月内","半年内","一年内","所有");

//层状态
varDate_DivState=newArray()

//鼠标焦点状态
varfocusState=false
varSearch=newObject();

//--------------------------------------
//初始化Div标签事件
//Joshua2007-02-07
//--------------------------------------
Search.Init=function(){
document.getElementById("Data_Area").onclick=Search.ShowArea.Init;
document.getElementById("Data_School").onclick=Search.ShowSchool;
document.getElementById("Data_Industry").onclick=Search.ShowIndustry;
document.getElementById("Data_Date").onclick=Search.ShowDate;
}

//-------------------------------
//创建一个Div对象
//Joshua2007-02-07
//-------------------------------
Search.CreateDiv=function(obj,Id,X,Y,oWidth,oHeight){
varObj_Div=document.createElement("div");
Obj_Div.setAttribute("id",Id);
Obj_Div.style.position="absolute";
Obj_Div.style.background="#fff";
Obj_Div.style.zIndex="10000";
Obj_Div.style.border="1pxsolid#CCCCCC";
Obj_Div.style.padding="3px";
Obj_Div.style.lineHeight="120%";
Obj_Div.style.left=X+"px";
Obj_Div.style.top=Y+"px";
Obj_Div.style.whiteSpace="nowrap";
Obj_Div.style.width=oWidth+"px";
//Obj_Div.style.height=oHeight+"px";
obj.appendChild(Obj_Div);
}

//------------------------------------
//判断Div是否存在
//Joshua2007-02-07
//------------------------------------
Search.IsDiv=function(Id){
varresult=true
try{
document.getElementById(Id).a=1;
}catch(e){
result=false
}
return(result);
}
//----------------------------
//删除Div对象
//Joshua2007-02-07
//----------------------------
Search.RemoveDiv=function(Id){
try{
if(navigator.appName.indexOf("Explorer")>-1){
document.getElementById(Id).removeNode(true);
}else{
document.body.removeChild(document.getElementById(Id));
}
}catch(e){}
}

//---------------------------
//遍历清除无用Div对象
//Joshua2007-02-07
//---------------------------
Search.DelDiv=function(){
try{
Search.RemoveDiv("Div_Area")
document.getElementById("Data_Area").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(document.getElementById("Data_Area")).substring(1,Search.ReadTextContent(document.getElementById("Data_Area")).length);
}catch(e){}
try{
Search.RemoveDiv("Div_School")
document.getElementById("Data_School").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(document.getElementById("Data_School")).substring(1,Search.ReadTextContent(document.getElementById("Data_School")).length);
}catch(e){}
try{
Search.RemoveDiv("Div_Industry")
document.getElementById("Data_Industry").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(document.getElementById("Div_Industry")).substring(1,Search.ReadTextContent(document.getElementById("Data_School")).length);
}catch(e){}
try{
Search.RemoveDiv("Div_Date")
document.getElementById("Data_Date").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(document.getElementById("Data_Date")).substring(1,Search.ReadTextContent(document.getElementById("Data_School")).length);
}catch(e){}
}

//--------------------------
//失去焦点,清楚Div对象
//Joshua2007-02-07
//--------------------------
Search.Lostfocus=function(){
if(!focusState){
try{
Search.RemoveDiv("Div_Area")
document.getElementById("Data_Area").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(document.getElementById("Data_Area")).substring(1,Search.ReadTextContent(document.getElementById("Data_Area")).length);
}catch(e){}
try{
Search.RemoveDiv("Div_School")
document.getElementById("Data_School").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(document.getElementById("Data_School")).substring(1,Search.ReadTextContent(document.getElementById("Data_School")).length);
}catch(e){}
try{
Search.RemoveDiv("Div_Industry")
document.getElementById("Div_Industry").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(document.getElementById("Data_Industry")).substring(1,Search.ReadTextContent(document.getElementById("Data_School")).length);
}catch(e){}
try{
Search.RemoveDiv("Div_Date")
document.getElementById("Data_Date").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(document.getElementById("Data_Date")).substring(1,Search.ReadTextContent(document.getElementById("Data_School")).length);
}catch(e){}
}
}

Search.ShowArea=function(){}
//------------------------
//显示地区一级菜单
//Joshua2007-02-07
//------------------------
Search.ShowArea.Init=function(){
focusState=true;
Search.DelDiv()//删除其他DIV标签
if(!Search.IsDiv("Div_Area")){
//更改Data_Area对象内容
document.getElementById("Data_Area").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">6"+Search.ReadTextContent(document.getElementById("Data_Area")).substring(1,Search.ReadTextContent(document.getElementById("Data_Area")).length);;
//显示层
Search.CreateDiv(document.body,"Div_Area",Search.getSelectPosition(document.getElementById("Data_Area"))[0],Search.getSelectPosition(document.getElementById("Data_Area"))[1]+12,80,0);
//创建省级分类
for(vari=0;i<Data_Area_Province.length;i++){
varObj_Span=document.createElement("div");
Obj_Span.setAttribute("id","Div_Area_Province_"+i);
Obj_Span.setAttribute("name",i);
Obj_Span.style.cursor="pointer";
Obj_Span.onmouseover=function(){
focusState=true;
this.style.border="1pxsolid#827C5F";
this.style.background="#CEC497";
}
Obj_Span.onmouseout=function(){
focusState=false;
if(!Date_DivState[this.getAttribute("value")]){
this.style.border="0pxsolid#ffffff";
this.style.background="#fff";}
}
Obj_Span.onclick=function(){
focusState=true;
//恢复非本对象的其他一级菜单项目样式
for(vari=0;i<Date_DivState.length;i++){
if(Date_DivState[i]==true&&this.value!=document.getElementById("Div_Area_Province_"+i).name){
document.getElementById("Div_Area_Province_"+i).style.border="0pxsolid#ffffff";
document.getElementById("Div_Area_Province_"+i).style.background="#fff";
}
}
//设置层状态
Date_DivState[this.getAttribute("name")]=true;
//生成二级菜单
Search.ShowArea.InitCity(this.getAttribute("name"),this)
}
Obj_Span.innerHTML=Data_Area_Province[i]+"<fontface=\"webdings\"style=\"font-size:10px;color:#000;position:absolute;right:3px;\">4";
document.getElementById("Div_Area").appendChild(Obj_Span);
}
}
}

//----------------------
//显示地区二级菜单
//Joshua2007-02-07
//----------------------
Search.ShowArea.InitCity=function(oId,obj){
if(!Search.IsDiv("Div_Area_City_"+oId)){
//删除除对象外存在的二级菜单对象
for(vari=0;i<Date_DivState.length;i++){
if(Date_DivState[i]==true&&i!=oId){
Search.RemoveCityDiv("Div_Area_Province_"+i,"Div_Area_City_"+i);
Date_DivState[i]=null;
}
}
//生成指定的二级菜单对象
Search.CreateDiv(obj,"Div_Area_City_"+oId,obj.offsetWidth,obj.offsetTop,50,0);

if(oId<Data_Area_Province.length){
for(vari=0;i<Data_Area_City[oId].length;i++){
varObj_Span=document.createElement("div");
Obj_Span.setAttribute("id","Div_Area_City"+i);
Obj_Span.style.cursor="pointer";
Search.SetTextContent(Obj_Span,Data_Area_City[oId][i]);
Obj_Span.setAttribute("value",oId);
Obj_Span.onmouseover=function(){
focusState=true;
this.style.border="1pxsolid#827C5F";
this.style.background="#CEC497";
}
Obj_Span.onmouseout=function(){
focusState=false;
this.style.border="0px";
this.style.background="#fff";
}
Obj_Span.onclick=function(){
//设置Data_Area的对象为选择的职
document.getElementById("Data_Area").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(this);
//设置Input值
document.getElementById("Input_Area").value=Search.ReadTextContent(this);
//删除Div对象
Search.RemoveDiv("Div_Area");
//恢复状态数组
Date_DivState.length=0;
}
document.getElementById("Div_Area_City_"+oId).appendChild(Obj_Span);
}
}
}

}

//----------------------------
//删除Div对象
//Joshua2007-02-07
//----------------------------
Search.RemoveCityDiv=function(Id,CId){
try{
if(navigator.appName.indexOf("Explorer")>-1){
document.getElementById(CId).removeNode(true);
}else{
document.getElementById(Id).removeChild(document.getElementById(CId));
}
}catch(e){}
}

//-------------------
//学历Div操作
//Joshua2007-02-07
//-------------------
Search.ShowSchool=function(){
focusState=true;
Search.DelDiv();//删除其他DIV标签
if(!Search.IsDiv("Div_School")){
document.getElementById("Data_School").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">6"+Search.ReadTextContent(document.getElementById("Data_School")).substring(1,Search.ReadTextContent(document.getElementById("Data_School")).length);
Search.CreateDiv(document.body,"Div_School",Search.getSelectPosition(document.getElementById("Data_School"))[0],Search.getSelectPosition(document.getElementById("Data_School"))[1]+12,60,0);
for(vari=0;i<Data_School.length;i++){
varObj_Span=document.createElement("div");
Obj_Span.setAttribute("id","Div_School_"+i);
Obj_Span.setAttribute("value",i);
Obj_Span.style.cursor="pointer";
Obj_Span.onmouseover=function(){
focusState=true;
this.style.border="1pxsolid#827C5F";
this.style.background="#CEC497";
}
Obj_Span.onmouseout=function(){
focusState=false;
this.style.border="0px";
this.style.background="#fff";
}
Obj_Span.onclick=function(){
document.getElementById("Data_School").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(this);
document.getElementById("Input_School").value=Search.ReadTextContent(this);
Search.RemoveDiv("Div_School");
}
Obj_Span.innerHTML=Data_School[i];
document.getElementById("Div_School").appendChild(Obj_Span);
}
}
}

//----------------------
//行业Div操作
//Joshua2007-02-07
//----------------------
Search.ShowIndustry=function(){
focusState=true;
Search.DelDiv();//删除其他DIV标签
if(!Search.IsDiv("Div_Industry")){
document.getElementById("Data_Industry").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">6"+Search.ReadTextContent(document.getElementById("Data_Industry")).substring(1,Search.ReadTextContent(document.getElementById("Data_Industry")).length);
Search.CreateDiv(document.body,"Div_Industry",Search.getSelectPosition(document.getElementById("Data_Industry"))[0],Search.getSelectPosition(document.getElementById("Data_Industry"))[1]+12,160,0);
for(vari=0;i<Data_Industry.length;i++){
varObj_Span=document.createElement("div");
Obj_Span.setAttribute("id","Div_Industry_"+i);
Obj_Span.setAttribute("value",i);
Obj_Span.style.cursor="pointer";
Obj_Span.onmouseover=function(){
focusState=true;
this.style.border="1pxsolid#827C5F";
this.style.background="#CEC497";
}
Obj_Span.onmouseout=function(){
focusState=false;
this.style.border="0px";
this.style.background="#fff";
}
Obj_Span.onclick=function(){
document.getElementById("Data_Industry").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(this);
document.getElementById("Input_Industry").value=Search.ReadTextContent(this);
Search.RemoveDiv("Div_Industry");
}
Obj_Span.innerHTML=Data_Industry[i];
document.getElementById("Div_Industry").appendChild(Obj_Span);
}
}
}

//-----------------------------
//时间Div操作
//Joshua2007-02-07
//-----------------------------
Search.ShowDate=function(){
focusState=true;
Search.DelDiv();//删除其他DIV标签
if(!Search.IsDiv("Div_Date")){
document.getElementById("Data_Date").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">6"+Search.ReadTextContent(document.getElementById("Data_Date")).substring(1,Search.ReadTextContent(document.getElementById("Data_Date")).length);
Search.CreateDiv(document.body,"Div_Date",Search.getSelectPosition(document.getElementById("Data_Date"))[0],Search.getSelectPosition(document.getElementById("Data_Date"))[1]+12,60,0);
for(vari=0;i<Data_Date.length;i++){
varObj_Span=document.createElement("div");
Obj_Span.setAttribute("id","Div_Date_"+i);
Obj_Span.setAttribute("value",i);
Obj_Span.style.cursor="pointer";
Obj_Span.onmouseover=function(){
focusState=true;
this.style.border="1pxsolid#827C5F";
this.style.background="#CEC497";
}
Obj_Span.onmouseout=function(){
focusState=false;
this.style.border="0px";
this.style.background="#fff";
}
Obj_Span.onclick=function(){
document.getElementById("Data_Date").innerHTML="<fontface=\"webdings\"style=\"font-size:10px;color:#ff9900;\">4"+Search.ReadTextContent(this);
document.getElementById("Input_Date").value=Search.ReadTextContent(this);
Search.RemoveDiv("Div_Date");
}
Obj_Span.innerHTML=Data_Date[i];
document.getElementById("Div_Date").appendChild(Obj_Span);
}
}
}

Search.SetTextContent=function(Obj,Content){
if(navigator.appName.indexOf("Explorer")>-1){
Obj.innerText=Content;
}else{
Obj.textContent=Content;
}
}
Search.ReadTextContent=function(Obj){
if(navigator.appName.indexOf("Explorer")>-1){
return(Obj.innerText);
}else{
return(Obj.textContent)
}
}

//-----------------------
//获取一个对象的坐标
//------------------------
Search.getSelectPosition=function(Gobj){
varobjLeft=Gobj.offsetLeft;
varobjTop=Gobj.offsetTop;
varobjParent=Gobj.offsetParent;
while(objParent!=null){
objLeft+=objParent.offsetLeft;
objTop+=objParent.offsetTop;
objParent=objParent.offsetParent;
}
return([objLeft,objTop]);
}

//------------------------
//页面初始化
//------------------------
window.onload=function(){
Search.Init();
}
window.document.onclick=function(){
Search.Lostfocus();
}
</script>
<style>
BODY{FONT-SIZE:12px;}
</style>
</head>

<body>
<spanid="Data_Area"style="cursor:pointer;"><fontface="webdings"style="font-size:10px;color:#ff9900;">4地区
<spanid="Data_School"style="cursor:pointer;"><fontface="webdings"style="font-size:10px;color:#ff9900;">4学历
<spanid="Data_Industry"style="cursor:pointer;"><fontface="webdings"style="font-size:10px;color:#ff9900;">4行业
<spanid="Data_Date"style="cursor:pointer;"><fontface="webdings"style="font-size:10px;color:#ff9900;">4时间
 
地区<inputname="Input_Area"type="text"id="Input_Area"value="">
 
学历<inputname="Input_School"type="text"id="Input_School"value="">
 
行业<inputname="Input_Industry"type="text"id="Input_Industry"value="">
 
时间<inputname="Input_Date"type="text"id="Input_Date"value="">
 
</body>
</html>

网站下拉菜单，选择下拉后自动填充(图)

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义