|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="模拟级联select,模拟select,选择地址">
<meta name="description" content="模拟级联select选择地址">
<title>模拟级联select-选择地址-麦时</title>
<link rel="stylesheet" type="text/css" href="../css/wheat.css">
<script type="text/javascript">
/**********************
wheat.js：
Author:麦时（timezhong）
Latest update:2012018
这只是个开始。
**********************/
/**********************
eventUtil：
跨浏览器事件对象定义
参数说明：
element：发生事件的元素
type：事件类型
handler：发生的事件
**********************/
var eventUtil={
//增加事件
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent ("on"+type,handler);
}else{
element["on"+type]=handler;
}
//封装oninput和onpropertychange
if(type="timeOnChangeValue"){
type="oninput"||"onpropertychange";
}
},
//判断event
getEvent:function(event){
return event ? event : window.event;
},
//获得事件目标
getTarget:function(event){
return event.target || event.srcTarget;
},
/*获得相关元素
getRelatedTarget:function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.fromElement){
return event.fromElement;
}else if(event.toElement){
return event.toElement;
}else{
return null;
}
},
*/
//移除事件
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}
else{
element["on"+type]=handler;
}
}
};
/*数组去重
原理：
找出与数组索引0个数相等的，删除之；
找出与数组索引1个数相等的，删除之；
找出与数组索引n(n=array.length)个数相等的，删除之；
注意：
考虑相邻元素相等的情况。
说明：
data：要传入数组的参数
*/
function removeRepeat(data){
for(var i=0; i<data.length;i++){
for(var j=i+1; j<data.length; j++){
if(data[i]==data[j]){
data.splice(j,1);
j--;//很重要，因为相等后，删除了一个，下一个J要跟着小一个。
}
}
}
}
/*实现自然数递增
原理：
使用setTimeout设置速度，隔一段时间+1处理
*/
/*
function increaseNumber(number,speed){
setInterval(function fk(){number++;return number;},speed);
}
*/
/*扩展类
包括增加类名等
*/
var extend={
/*增加类名*/
addClassName:function(element,classname){
var classNameArr=element.className.split(" ");
for(var i=0,l=classNameArr.length,flag=0; i<l ; i++){
if(classNameArr[i]==classname){
flag=1;//如果相等改变初始值，要么下面的会执行。
}
}
if(flag===0){
classNameArr.push(classname);
}
element.className=classNameArr.join(" ");
},
/*移除类名*/
removeClassName:function(element,classname){
var classNameArr=element.className.split(" ");
for(var i=0,l=classNameArr.length; i<l ; i++){
if(classNameArr[i]==classname){
classNameArr.splice(i,1);
}
}
element.className=classNameArr.join(" ");
},
//切换类名
switchClassName:function(element,classname){
if(element.className.indexOf(classname)==-1){
extend.addClassName(element,classname);
}
else{
extend.removeClassName(element,classname);
}
},
//改变元素不透明度
changeOpacity:function(element){
var opacityValue=element.style.opacity*10;
setInterval(
function(){
if(opacityValue<10){
opacityValue+=1;
element.style.opacity=opacityValue/10;
element.style.filter="alpha(opacity=opacityValue)";//for ie
}
}
,50)
},
//改变元素位置
changePosition:function(element,topValue,leftValue,speed){
setInterval(
function(){
var elementWidth=parseInt(element.style.width);
//水平方向
var currentLocationLeft=parseInt(element.style.left);//获得元素的位置
var distanceLeft=leftValue-currentLocationLeft;//算出现在位置与目标位置之差
if(distanceLeft>0){//判断移动方向
element.style.left=(currentLocationLeft+1)+"px";
}else if(distanceLeft<0){
element.style.left=(currentLocationLeft-1)+"px";
}else if(distanceLeft==0){
elementWidth-=5;
leftValue=0;
element.style.width=elementWidth+"px";
}
if(currentLocationLeft==0){
elementWidth-=5;
element.style.width=elementWidth+"px";
leftValue=500-parseInt(element.style.width);
}
//垂直方向
var currentLocationTop=parseInt(element.style.top);//获得元素的位置
var distanceTop=topValue-currentLocationTop;//算出现在位置与目标位置之差
if(distanceTop>0){//判断移动方向
element.style.top=(currentLocationTop+1)+"px";
}
else if(distanceTop<0){
element.style.top=(currentLocationTop-1)+"px";
}
}
,speed
)
}
}
var slide=function(btnPre,brnNex,btnPreDis,btnNexDis,mainCon,length,speed){
var eachDistance=0;
eventUtil.addHandler(btnPre,"click",
function(){
//移动速度
eachDistance=0;
setInterval(function(){
if(eachDistance<10){
mainCon.style.left=(length++)+"px";
eachDistance++;
}
},speed);
btnPre.style.className=mainCon.style.left==0?btnPreDis:"";//不可点状态
}
);
eventUtil.addHandler(brnNex,"click",
function(){
//移动速度
eachDistance=0;
setInterval(function(){
if(eachDistance<10){
mainCon.style.left=(length--)+"px";
eachDistance++;
}
},speed);
brnNex.style.className=mainCon.style.left==0?btnNexDis:"";//不可点状态
}
);
}
//颜色：10进制转换为16进制
String.prototype.hexColor=function(){
//if
var hexColor=new Array();
hexColor[0]=parseInt(this.slice(4,7)).toString(16);//先截取相应的代码片段，然后把字符串转化为10进制，最后转化为16进制。
hexColor[1]=parseInt(this.slice(8,11)).toString(16);
hexColor[2]=parseInt(this.slice(12,15)).toString(16);
return("#"+hexColor.join(""));
}
//在head中插入style标签
function addStyleElement(){
var head=document.getElementsByTagName("head");
style=document.createElement("style");
style.setAttribute("type","text/css");
document.head.appendChild(style);
}
//改变style里的css
function changeStyleCss(cssText){
var style=document.getElementsByTagName("style");
style[0].innerHTML=cssText;
}
//数组操作
var wheatArray={
//获取数组索引
getArrIndex:function(object,array){
for(var i=0;i<array.length;i++){
if(object==array[i]){
return i;
}
}
}
};
/*wheatFake:模拟表单元素********************************
select：模拟select
参数说明：
showValue:显示最终的选择值
selectedValueBox：触发列表展开的盒子
selectedValueBoxHoverClassName：触发列表展开时的类名
selectedValue：最终选中的列表项的值
option:选择列表集
optionItems：选择列表项
optionItemHoverClassName：鼠标悬停列表的类名
***************************************************/
var wheatFake={
select:function(showValue,selectedValueBox,selectedValueBoxHoverClassName,selectedValue,option,optionItems,optionItemHoverClassName){
function controlOptionItems(){
extend.switchClassName(selectedValueBox,"hover");//不能用this
option.style.display=(option.style.display=="none")?"block":"none";
//匹配状态
for(var i=0,j=optionItems.length;i<j;i++){
if(selectedValue.innerHTML==optionItems[i].innerHTML){
extend.addClassName(optionItems[i],optionItemHoverClassName);
}
}
}
//下拉列表显示
eventUtil.addHandler(selectedValueBox,"click",function (){
controlOptionItems()
});
for(var i=0,j=optionItems.length;i<j;i++){
//点击列表显示对应值，且列表隐藏
eventUtil.addHandler(optionItems[i],"click",(function(h) {
return function(event){
selectedValue.innerHTML=optionItems[h].innerHTML;//注意这里要用this，而不是optioniList[i]
showValue.innerHTML=optionItems[h].innerHTML;
option.style.display="none";
//点击列表，控制显示框状态
extend.removeClassName(selectedValueBox,selectedValueBoxHoverClassName);
};
}(i)));
//改变可选项的鼠标经过状态
eventUtil.addHandler(optionItems[i],"mouseover",(function(h) {
return function(event){
extend.addClassName(optionItems[h],optionItemHoverClassName);
//获取鼠标的列表mouseover索引
var y=wheatArray.getArrIndex(optionItems[h],optionItems);
//列表选中后的切换状态
for(var m=0,n=optionItems.length;m<n;m++){
if(optionItems[m].className==" current"&&m!=y){
extend.removeClassName(optionItems[m],optionItemHoverClassName);
}
}
};
}(i)));
eventUtil.addHandler(optionItems[i],"mouseout",(function(h) {
return function(){
extend.removeClassName(optionItems[h],optionItemHoverClassName);
};
}(i)));
//默认第一个选中
extend.addClassName(optionItems[0],optionItemHoverClassName);
//键盘事件
window.onkeydown=function(){
if(option.style.display=="block"){
var event=eventUtil.getEvent(event);
switch(event.keyCode){
//向下键
case 40:
for(var i=0,j=optionItems.length;i<j;i++){
if(optionItems[i].className==" current"){
if(i==optionItems.length-1){
extend.removeClassName(optionItems[i],optionItemHoverClassName);
extend.addClassName(optionItems[0],optionItemHoverClassName);
}
else{
extend.removeClassName(optionItems[i],optionItemHoverClassName);
i++;
extend.addClassName(optionItems[i],optionItemHoverClassName);
break;
}
}
}
break;
//向上键
case 38:
for(var i=0,j=optionItems.length;i<j;i++){
if(optionItems[i].className==" current"){
if(i==0){
extend.addClassName(optionItems[0],optionItemHoverClassName);
}
else{
extend.removeClassName(optionItems[i],optionItemHoverClassName);
i--;
extend.addClassName(optionItems[i],optionItemHoverClassName);
break;
}
}
}
break;
//回车键
case 13:
controlOptionItems();
selectedCityBox.focus()
console.log("回车");
break;
}
}
}
}
}
,
//显示选择地址
selectAdress:function(showVlue,optionItems){
for(var i=0,j=optionItems.length;i<j;i++){
eventUtil.addHandler(optionItems[i],"click",(function(h) {
return function(){
showVlue.innerHTML=optionItems[h].innerHTML;
};
}(i)));
}
}
,
//重置
resetSelect:function(optionItems,targetOption,targetOptionValue,targetShowValue){
for(var i=0,l=optionItems.length;i<l;i++){
eventUtil.addHandler(optionItems[i],"click",function(){
targetOption.style.display="none";
targetOptionValue.innerHTML="不限";
targetShowValue.innerHTML="不限";
});
}
}
};
</script>
</head>
<body>
<!--头部-->
<div class="layout-header clearfix">
<div class="mod-header">
<div class="logo clearfix">
<h1><a href="http://www.wheattime.com" title="麦时" target="_blank">麦时</a></h1>
<p class="slogan">把玩前端技术 赏析交互之美</p>
</div>
<ul class="mod-main-nav">
<li>
<a class="current" href="http://www.wheattime.com" title="首页" target="_blank">首页</a>
</li>
<li>
<a href="http://www.wheattime.com/about-me.html" title="关于麦时" target="_blank">关于</a>
</li>
</ul>
</div>
</div>
<!--/头部-->
<div class="layout-content">
<div class="layout-content-bd">
<div class="mod-con-header arrow-header">
<p class="back-con-page"><a href="http://www.wheattime.com/analog-cascade-select-select-address.html" target="_blank"><<返回正文</a></p>
<h2 class="mod-tit2">模拟级联select-选择地址</h2>
</div>
<!--选择地址-->
<div class="select-adress-container clearfix">
<div class="bd">
<label for="selectAdress" class="label-name">所在地：</label>
<div class="select-adress-wrap" id="selectAdress">
<div class="adress-box" id="adressBox" tabindex="1">
<span class="adress">
<em id="province">不限</em>-<em id="city">不限</em>-<em id="area">不限</em>
</span>
<s class="arrow arrow-down"></s>
</div>
<div class="select-box clearfix" id="selectBox">
<!--省-->
<div class="select-item select-province" id="selectProvince">
<span class="selected-value" id="selectedProvinceBox" tabindex="2">
<em id="selectedProvince">不限</em>
<s class="arrow arrow-down"></s>
</span>
<ul class="item-list" id="optionProvince" style="display:none">
</ul>
</div>
<!--/省-->
<!--市-->
<div class="select-item select-city" id="selectCity">
<span class="selected-value" id="selectedCityBox" tabindex="3">
<em id="selectedCity">不限</em>
<s class="arrow arrow-down"></s>
</span>
<ul class="item-list" style="display:none" id="optionCity">
</ul>
</div>
<!--/市-->
<!--区-->
<div class="select-item select-area" id="selectArea">
<span class="selected-value" id="selectedAreaBox" tabindex="4">
<em id="selectedArea">不限</em>
<s class="arrow arrow-down"></s>
</span>
<ul class="item-list" style="display:none" id="optionArea">
</ul>
</div>
<!--/区-->
</div>
</div>
</div>
</div>
<!--/选择地址-->
</div>
</div>
<script type="text/javascript">
//地址数据
var wheatAddressData=[
{
"province":"不限",
"city":["不限"],
"area":["不限"]
},
{
"province":"江苏",
"city":["不限","南京","宿迁","苏州市","南通市"],
"area":[
["不限"],
["不限","玄武区","白下区","秦淮区","建邺区","鼓楼区","下关区","浦口区","栖霞区"],
["不限","沭阳县","泗阳县","泗洪县","宿豫区","宿城区"],
["不限","金阊区","沧浪区","平江区","虎丘区","吴中区","相城区"],
["不限","崇川区","港闸区","如皋市","通州市","海门市","启东市"]
]
},
{
"province":"浙江",
"city":["不限","杭州","宁波"],
"area":[
["不限"],
["不限","上城区","下城区","西湖区","拱墅区","江干区","滨江区","萧山区"],
["不限","鄞州区","海曙区","江东区","江北区","北仑区","镇海区"]
]
},
{
"province":"北京",
"city":["不限","东城区","西城区","海淀区","朝阳区","石景山区","丰台区","通州区","顺义区","大兴区","昌平区","房山区"],
"area":[
["不限"],
["不限"],
["不限"],
["不限"],
["不限"],
["不限"],
["不限"],
["不限"],
["不限"],
["不限"],
["不限"],
["不限"]
]
}
];
var wheatAddress=eval(wheatAddressData);
</script>
<script type="text/javascript">
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<j;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<k;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<l;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<n;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<s;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<n;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";
}
});
</script>
</body>
</html>
|
