快捷導(dǎo)航

JavaScript簡單下拉菜單特效

更新時間：2016年09月13日 14:56:46 作者：gemingzhu

這篇文章主要為大家詳細介紹了JavaScript簡單下拉菜單特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js下拉菜單特效，供大家參考，具體內(nèi)容如下

實例1：聯(lián)動的省市下拉菜單

onchange 事件會在域的內(nèi)容改變時發(fā)生。

<script type="text/javascript">     
      var arr = new Array();       //數(shù)據(jù)數(shù)組
      //定義數(shù)據(jù)，結(jié)構(gòu)為：id、名字、父id
      arr[arr.length] = [1, '北京市', null];
      arr[arr.length] = [2, '四川省', null];
      arr[arr.length] = [3, '廣東省', null];
      arr[arr.length] = [4, '北京市', 1];
      arr[arr.length] = [5, '成都市', 2];
      arr[arr.length] = [6, '廣州市', 3];
      arr[arr.length] = [7, '深圳市', 3];
      //動態(tài)設(shè)置下拉項目
      function fillOptions(type){
        if(type == 'province'){
          //獲取省份下拉菜單的DOM
          var province = document.getElementById("province");
          province.innerHTML = '';    //內(nèi)容先置空
          //填充省的字符
          var proStr = '<option value=""></option>';
          //遍歷數(shù)組
          for(var i=0; i<arr.length; i++){
            var item = arr[i];   //當前項
            //如果沒有父id，則是省份
            if(item[2] == null)
              proStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          province.innerHTML = proStr;//填充新內(nèi)容
        }else if(type == 'city'){
          //獲取當前的省份的id
          var currProId = document.getElementById("province").value;
          if(currProId == '')
            return false;
          //獲取城市下拉菜單的DOM
          var city = document.getElementById("city");
          city.innerHTML = '';      //內(nèi)容先置空
          //填充市的字符
          var cityStr = '<option value=""></option>';
          //遍歷數(shù)組
          for(var i=0; i<arr.length; i++){
            var item = arr[i];   //當前項
            //判斷是否為當前省下的城市
            if(item[2] == currProId)
              cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          city.innerHTML = cityStr    ;//填充新內(nèi)容
        }
      }
    </script>

<body style="text-align:center;" onload="fillOptions('province');">
    <!-- 定義下拉菜單 -->
    ?。?lt;select id="province" onchange="fillOptions('city')"></select><br/><br/>
    市：<select id="city"></select><br/><br/>
  </body>

實例2：三級聯(lián)動的省市縣下拉菜單

<script type="text/javascript">     
      var arr = new Array();       //數(shù)據(jù)數(shù)組
      //定義數(shù)據(jù)，結(jié)構(gòu)為：id、名字、父id
      arr[arr.length] = [1, '北京市', null];
      arr[arr.length] = [2, '四川省', null];
      arr[arr.length] = [3, '廣東省', null];
      arr[arr.length] = [4, '北京市', 1];
      arr[arr.length] = [5, '成都市', 2];
      arr[arr.length] = [6, '廣州市', 3];
      arr[arr.length] = [7, '深圳市', 3];
      arr[arr.length] = [8, '武侯區(qū)', 5];
      arr[arr.length] = [9, '青羊區(qū)', 5];
      arr[arr.length] = [10, '白云區(qū)', 6];
      arr[arr.length] = [11, '增城市', 6];
      arr[arr.length] = [12, '從化市', 6];
      //動態(tài)設(shè)置下拉項目
      function fillOptions(type){
        if(type == 'province'){
          //獲取省份下拉菜單的DOM
          var province = document.getElementById("province");
          province.innerHTML = '';    //內(nèi)容先置空
          //填充省的字符
          var proStr = '<option value=""></option>';         
          for(var i=0; i<arr.length; i++){  //遍歷數(shù)組
            var item = arr[i];     //當前項
            //如果沒有父id，則是省份
            if(item[2] == null)
              proStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          province.innerHTML = proStr;  //填充新內(nèi)容
        }else if(type == 'city'){
          //獲取當前的省份的id
          var currProId = document.getElementById("province").value;
          if(currProId == '')
            return false;
          //獲取城市下拉菜單的DOM
          var city = document.getElementById("city");
          city.innerHTML = '';      //內(nèi)容先置空
          //填充市的字符
          var cityStr = '<option value=""></option>';         
          for(var i=0; i<arr.length; i++){  //遍歷數(shù)組
            var item = arr[i];     //當前項
            //判斷是否為當前省下的城市
            if(item[2] == currProId)
              cityStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          city.innerHTML = cityStr    ;//填充新內(nèi)容
        }else if(type == 'area'){
          //獲取當前城市的id
          var currCityId = document.getElementById("city").value;
          if(currCityId == '')
            return false;
          //獲取區(qū)縣下拉菜單的DOM
          var area = document.getElementById("area");
          area.innerHTML = '';      //內(nèi)容先置空
          //填充區(qū)縣的字符
          var areaStr = '<option value=""></option>';         
          for(var i=0; i<arr.length; i++){  //遍歷數(shù)組
            var item = arr[i];     //當前項
            //判斷是否為當前城市下的區(qū)縣
            if(item[2] == currCityId)
              areaStr += '<option value='+item[0]+'>'+item[1]+'</option>';
          }
          area.innerHTML = areaStr;  //填充新內(nèi)容
        } 
      }
</script>

<body style="text-align:center;" onload="fillOptions('province');">
    <!-- 定義下拉菜單 -->
    ?。?lt;select id="province" onchange="fillOptions('city')"></select><br/><br/>
    市：<select id="city" onchange="fillOptions('area')"></select><br/><br/>
    縣/區(qū)：<select id="area"></select><br/><br/>
</body>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: