words" content="模拟级联select ,模拟select,选择地址">
模拟级联select-选择地址-麦时
var province=document.getElementById("province"),
city=document.getElementById("city"),
area=document.getElementById("area"),
selectBox=document.getElementById("selectBox"),
selectAdress=document.getElementById("selectAdress"),
adressBox=document.getElementById("adressBox"),
arrow1=adressBox.getElementsByTagName("s"),
selectedProvinceBox=document.getElementById("selectedProvinceBox"),
selectedProvince=document.getElementById("selectedProvince"),
optionProvince=document.getElementById("optionProvince"),
optionProvinceItems=optionProvince.getElementsByTagName("li"),
selectedCityBox=document.getElementById("selectedCityBox"),
selectedCity=document.getElementById("selectedCity"),
optionCity=document.getElementById("optionCity"),
optionCityItems=optionCity.getElementsByTagName("li"),
selectedAreaBox=document.getElementById("selectedAreaBox"),
selectedArea=document.getElementById("selectedArea"),
optionArea=document.getElementById("optionArea"),
optionAreaItems=optionArea.getElementsByTagName("li");
//生成省列表
function createProvinceItems(){
for(var i=0,j=wheatAddress.length;i
var li=document.createElement("li");
li.innerHTML=wheatAddress[i].province;
optionProvince.appendChild(li);
}
//选择省
wheatFake.select(province,selectedProvinceBox,"hover",selectedProvince,optionProvince,optionProvinceItems,"current");
}
createProvinceItems();
//生成市列表
function createCityItems(){
for(var m=0,k=optionProvinceItems.length;m
optionProvinceItems[m].onclick=function(){
//先清空可能有的列表
optionCity.innerHTML="";
//获取点击省份列表索引
provinceIndex=wheatArray.getArrIndex(this,optionProvinceItems);
//重置
optionCity.style.display="none";
optionArea.style.display="none";
selectedCity.innerHTML="不限";
city.innerHTML="不限";
selectedArea.innerHTML="不限";
area.innerHTML="不限";
for(var i=0,l=wheatAddress[provinceIndex].city.length;i
var li=document.createElement("li");
li.innerHTML=wheatAddress[provinceIndex].city[i];
optionCity.appendChild(li);
//status
//改变可选项的鼠标经过状态
eventUtil.addHandler(optionCityItems[i],"mouseover",(function(h) {
return function(event){
extend.addClassName(optionCityItems[h],"current");
//获取鼠标的列表mouseover索引
var y=wheatArray.getArrIndex(optionCityItems[h],optionCityItems);
//列表选中后的切换状态
for(var m=0,n=optionCityItems.length;m
if(optionCityItems[m].className==" current"&&m!=y){
extend.removeClassName(optionCityItems[m],"current");
}
}
};
}(i)));
eventUtil.addHandler(optionCityItems[i],"mouseout",(function(h) {
return function(){
extend.removeClassName(optionCityItems[h],"current");
};
}(i)));
//点击列表显示对应值,且列表隐藏
eventUtil.addHandler(optionCityItems[i],"click",(function(h) {
return function(event){
selectedCity.innerHTML=optionCityItems[h].innerHTML;//注意这里要用this,而不是optioniList[i]
city.innerHTML=optionCityItems[h].innerHTML;
optionCity.style.display="none";
//点击列表,控制显示框状态
extend.removeClassName(selectedCityBox,"hover");
};
}(i)));
//status
wheatFake.selectAdress(city,optionCityItems);//市
optionCityItems[i].onclick=function(){
//先清空可能有的列表
optionArea.innerHTML="";
//获取点击市区列表索引
cityIndex=wheatArray.getArrIndex(this,optionCityItems);
//重置
optionArea.style.display="none";
selectedArea.innerHTML="不限";
area.innerHTML="不限";
for(var r=0,s=wheatAddress[provinceIndex].area[cityIndex].length;r
var li=document.createElement("li");
li.innerHTML=wheatAddress[provinceIndex].area[cityIndex][r];
optionArea.appendChild(li);
//status
//改变可选项的鼠标经过状态
eventUtil.addHandler(optionAreaItems[r],"mouseover",(function(h) {
return function(event){
extend.addClassName(optionAreaItems[h],"current");
//获取鼠标的列表mouseover索引
var y=wheatArray.getArrIndex(optionAreaItems[h],optionAreaItems);
//列表选中后的切换状态
for(var m=0,n=optionAreaItems.length;m
if(optionAreaItems[m].className==" current"&&m!=y){
extend.removeClassName(optionAreaItems[m],"current");
}
}
};
}(r)));
eventUtil.addHandler(optionAreaItems[r],"mouseout",(function(h) {
return function(){
extend.removeClassName(optionAreaItems[h],"current");
};
}(r)));
//点击列表显示对应值,且列表隐藏
eventUtil.addHandler(optionAreaItems[r],"click",(function(h) {
return function(event){
selectedArea.innerHTML=optionAreaItems[h].innerHTML;//注意这里要用this,而不是optioniList[i]
area.innerHTML=optionAreaItems[h].innerHTML;
optionArea.style.display="none";
//点击列表,控制显示框状态
extend.removeClassName(selectedAreaBox,"hover");
};
}(r)));
//status
//显示选择的地址
wheatFake.selectAdress(area,optionAreaItems);//区
}
}
}
}
}
//选择区
wheatFake.select(city,selectedAreaBox,"hover",selectedArea,optionArea,optionAreaItems,"current");
//选择市
wheatFake.select(area,selectedCityBox,"hover",selectedCity,optionCity,optionCityItems,"current");
}
createCityItems();
eventUtil.addHandler(adressBox,"click",function(){
//改变选择地址的状态
if(adressBox.className.indexOf("hover")==-1){
extend.addClassName(adressBox,"hover");
}else{
extend.removeClassName(adressBox,"hover");
};
//选择框的显示和隐藏
selectBox.style.display=(selectBox.style.display=="block")?"none":"block";
//三角方向
arrow1[0].className=(arrow1[0].className=="arrow arrow-down")?"arrow arrow-up":"arrow arrow-down";
});
//点击其中1项select,其他2项选择列表隐藏
eventUtil.addHandler(selectedProvinceBox,"click",function(){
optionCity.style.display="none";
optionArea.style.display="none";
extend.removeClassName(selectedCityBox,"hover");
extend.removeClassName(selectedAreaBox,"hover");
});
eventUtil.addHandler(selectedCityBox,"click",function(){
optionProvince.style.display="none";
optionArea.style.display="none";
extend.removeClassName(selectedProvinceBox,"hover");
extend.removeClassName(selectedAreaBox,"hover");
//省份没有选择的情况
if(selectedProvince.innerHTML=="不限"){
extend.removeClassName(selectedCityBox,"hover");
optionCity.style.display="none";
}
});
eventUtil.addHandler(selectedAreaBox,"click",function(){
optionProvince.style.display="none";
optionCity.style.display="none";
extend.removeClassName(selectedProvinceBox,"hover");
extend.removeClassName(selectedCityBox,"hover");
//市没有选择的情况
if(selectedCity.innerHTML=="不限"){
extend.removeClassName(selectedAreaBox,"hover");
optionArea.style.display="none";
}
});