js模拟级联select城市地址选择

效果如下

 代码如下 复制代码

<!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">&lt;&lt;返回正文</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>
时间： 2024-10-24 20:44:14

js模拟级联select城市地址选择的相关文章

JS模拟实现Select效果代码_javascript技巧

本文实例讲述了JS模拟实现Select效果代码.分享给大家供大家参考.具体如下: 这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-select-style-demo-codes/ 具体代码如下: <!DOCT

Jquery模拟的select点击选择实现代码

采用模拟的好处可以任意的进行样式控制,做出各种各样的效果,在各个浏览器中的表现都一致,实现客户蛋疼的要求,但缺点也是同样的存在的,网络非常慢或客户端禁止运行脚本的时候//(尽管脚本禁止运行的机率很低,一般只会有服务器版本的浏览器上才会出现),脚本加载不到有可能会影响到其失效,无法进行操作, 实现的思路很简单,只有两步: 1.当鼠标进行移入和点击的目标元素的时候,触发弹出一个层,层内装着模拟的不同的元素的值 2.点击选择层内的元素的时候,需要将点击元素文本元素赋到目标元素中,并将元素内的一些参数值

js实现全国省份城市级联下拉菜单效果代码_javascript技巧

本文实例讲述了js实现全国省份城市级联下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax了,貌似这种老形式已经过时了,不过在兼容性方面,仍然是不落后的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-conv-city-xl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI

js模拟淘宝网的多级选择菜单实现方法_javascript技巧

本文实例讲述了js模拟淘宝网的多级选择菜单实现方法.分享给大家供大家参考.具体如下: 这是一款基于js模拟淘宝网的多级选择菜单代码,这款菜单是模拟淘宝网的,是很早时候的淘宝网,现在已经没有了,本款菜单可以像级联菜单那样一级一级的选择数据,最后确定出数据. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

js模拟select下拉菜单控件的代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <meta charset=utf-8 /> <title>js模拟select</title> </head>    <style>   *{ marg

JS实现的5级联动Select下拉选择框实例_javascript技巧

本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se

jQuery模拟实现的select点击选择效果【附demo源码下载】_jquery

本文实例讲述了jQuery模拟实现的select点击选择效果.分享给大家供大家参考,具体如下: 有时候有些HTML元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的.面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已. 虽然很喜欢什么都没有修

js实现仿阿里巴巴城市选择框效果实例

  本文实例讲述了js实现仿阿里巴巴城市选择框效果.分享给大家供大家参考.具体分析如下: 这并不是一个城市选择插件,在这里介绍只是为了mark一下二级联动的方法,此效果适用于有二级子菜单的效果,如导航栏.城市选择.类别选择等等. 样式效果是基于阿里的样式,懒得做其他调整,在area.css中仅仅是为了修改浏览器兼容性略做了一点调整. 城市数据是通过js构造,当然也可以通过后端取得数据,不过感觉没必要. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

js自动查找select下拉的菜单并选择

 这篇文章主要介绍了js自动查找select下拉的菜单并选择(示例代码)需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: function find_select(name) {  var select = document.getElementsByName(name);  var find_str = document.getElementById('to_find_str').value;  if(select)  {   select = select[0];   var ch