三级联动

最新推荐文章于 2024-04-01 09:49:29 发布

wangqinfen

最新推荐文章于 2024-04-01 09:49:29 发布

阅读量523

点赞数 1

分类专栏： js jquery 文章标签： js jquery

本文链接：https://blog.csdn.net/wangqinfen/article/details/51809510

版权

js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

纯js三级联动

省市县三级联动

<html>

<head>

<style >
td
{border: solid 3px blue;}

tr:eq(2)
{border: solid 3px green;}

tr:eq(3)
{border: solid 3px blue;}

tr:eq(4)
{border: solid 3px green;}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>     导入jQuery插件

<script type="text/javascript">

   // 省市县三级假数据，实际开发中，该变量的值可改为AJAX获取
   var area = "[{id:101,name:'北京',pid:0},{id:102,name:'山东',pid:0},{id:103,name:'河北',pid:0},{id:201,name:'海淀区',pid:101},{id:202,name:'丰台区',pid:101},{id:203,name:'朝阳区',pid:101},{id:210,name:'济南',pid:102},{id:211,name:'青岛',pid:102},{id:212,name:'烟台',pid:102},{id:220,name:'石家庄',pid:103},{id:221,name:'邯郸',pid:103},{id:222,name:'邢台',pid:103},{id:301,name:'长清',pid:210},{id:302,name:'市中区',pid:210},{id:303,name:'章丘',pid:210},{id:304,name:'市南区',pid:211},{id:305,name:'黄岛',pid:211},{id:306,name:'平度',pid:211}]";

   // 将字符串转成JSON对象
   var areaJson = eval("(" + area + ")");

   // 页面加载完成后执行的方法
   $(function(){

       renderProvince();

       var selectedProvinceId = $("#provinceSelect").val();

       renderCity(selectedProvinceId);

       var selectedCityeId = $("#citySelect").val();

       renderCountry(selectedCityeId);
   });

   // 渲染【省】下拉框
   function renderProvince(){

       for(var i=0; i<areaJson.length; i++){

           if(areaJson[i].pid == 0){
               var provinceOption = "<option value="+areaJson[i].id+">"+areaJson[i].name+"</option>";
               $("#provinceSelect").append(provinceOption);
           }
       }
   }

   // 渲染【市】下拉框
   function renderCity(provinceId){

       $("#citySelect").empty();

       for(var i=0; i<areaJson.length; i++){

           if(areaJson[i].pid == provinceId){
               var cityOption = "<option value="+areaJson[i].id+">"+areaJson[i].name+"</option>";
               $("#citySelect").append(cityOption);
           }
       }
   }

   // 渲染【县】下拉框
   function renderCountry(cityId){

       $("#countrySelect").empty();
       for(var i=0; i<areaJson.length; i++){

           if(areaJson[i].pid == cityId){
               var countryOption = "<option value="+areaJson[i].id+">"+areaJson[i].name+"</option>";
               $("#countrySelect").append(countryOption);
           }
       }
   }

   // 刷新【市】和【县】两级下拉框
   function refreshCitySelect(){

       var selectedProvinceId = $("#provinceSelect").val();

       renderCity(selectedProvinceId);

       var selectedCityeId = $("#citySelect").val();

       renderCountry(selectedCityeId);
   }

   // 刷新【县】下拉框
   function refreshCountrySelect(){

       var selectedCityeId = $("#citySelect").val();

       renderCountry(selectedCityeId);
   }

</script>

</head>

<body>

<div>省市县三级联动</div>
<div id="luckyName">

   <select id="provinceSelect" οnchange="refreshCitySelect()"></select>

   <select id="citySelect" οnchange="refreshCountrySelect()"></select>

   <select id="countrySelect"></select>★★★★★

</div>

</body>

</html>

年月日三级联动

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script> 导入jQuery插件
<script type="text/javascript">
    var currentDate = new Date();
    var currentYear;
    var currentMonth;
    $(function(){
        renderYearSelect();
        renderMonthSelect();
        renderDaySelect(currentMonth);
    })
    // 生成【年份】下拉框的内容
    function renderYearSelect(){
        
        currentYear = currentDate.getFullYear();
        for(var i = currentYear - 50; i < currentYear + 10; i++){
            $("#yearSelect").append("<option>"+i+"</option>");
        }
        $("#yearSelect option[value="+currentYear+"]").attr("selected", "selected");
    }
    function renderMonthSelect(){
        currentMonth = currentDate.getMonth() + 1;
        for(var i = 1; i <= 12; i++){
            $("#monthSelect").append("<option value="+i+">"+i+"</option>");
        }
        $("#monthSelect option[value="+currentMonth+"]").attr("selected", "selected");
    }
    // 生成【日】下拉框的内容    
    function renderDaySelect(month){
        $("#daySelect").empty();
        var currentDays = computeDays(month);
        
        for(var i = 1; i <= currentDays; i++){
            $("#daySelect").append("<option>"+i+"</option>");
        }

    }
    function computeDays(month){
        
        if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
            return 31;
        }
        else if(month == 4 || month == 6 || month == 9 || month == 11){
            return 30;
        }
        else{
            if( isLeapYear(currentYear)){
                return 29;
            }
            else{
                return 28;
            }
        }
    }
    function isLeapYear(year){
        if(year % 400 == 0){
            return true;
        }
        else if (year % 4 == 0 && year % 100 != 0)
        {
            return true;
        }
        else{
            return false;
        }
    }
    function changeMonth(){
        currentMonth = $("#monthSelect").val();
        
        renderDaySelect(currentMonth);
    }
    function changeYear(){
        currentYear = $("#yearSelect").val();
        changeMonth();
    }
</script>
</head>
<body>
<select id="yearSelect" style="width:100px;" οnchange="changeYear()">
</select>
<select id="monthSelect" οnchange="changeMonth()">
</select>
<select id="daySelect">
</select>
</body>
</html>