js做日期选择：

实现当前年份的前5后5年的日期选择

实现功能：年份和月份页面加载完成使用JS循环添加，天数根据月份的变化动态添加改变

扩展功能：天数可以根据闰年平年变化

<body>

<select id="nian" onclick="biantian()"></select>年

<select id="yue" onclick="biantian()"></select>月

<select id="tian"></select>日

<script type="text/javascript">

FillNian();

FillYue();

FillTian();

function FillNian()

{

    var b = new Date(); //获取当前时间

    var nian = parseInt(b.getFullYear());  //把年份强制转换为整型

    var str = "";

    for(var i=nian-5;i<nian+6;i++)

    {

        str = str+"<option value='"+i+"'>"+i+"</option>";//添加<option>标签

    }

    document.getElementById("nian").innerHTML = str;

}

function FillYue()

{

    var str = "";

    for(var i=1;i<13;i++)

    {

        str = str+"<option value='"+i+"'>"+i+"</option>";

    }

    document.getElementById("yue").innerHTML = str;

}

function FillTian()

{

    var yue = document.getElementById("yue").value;

    var nian = document.getElementById("nian").value;

    var ts = 31;

    if(yue==4 || yue==6 || yue==9 || yue==11)        //判断月份

    {

        ts=30;

    }

    if(yue==2)                                          //如果是2月的话，里面要判断是不是闰年

    {

        if((nian%4==0 && nian%100 != 0) || nian%400==0)

        {

            ts = 29;

        }

        else

        {

            ts = 28;

        }

    }

    var str = "";

    for(var i=1;i<ts+1;i++)

    {

        str = str+"<option value='"+i+"'>"+i+"</option>";

    }

    document.getElementById("tian").innerHTML = str;

}

function biantian()

{

    FillTian();

}

</script>

</body>

ajax做三级联动：

当dataType:"text"时，返回的数据是这样的，所以下面的split根据“|”和“^”来分割

1.主页面做一个div，存储三个下拉列表，并引入jquery和js

<script src="jquery-1.11.2.min.js"></script>

<script src="sanjiliandong.js"></script>

</head>

<body>

<div id="sanji"></div>

</body>

2.做一个纯js页面

// JavaScript Document

$(document).ready(function(e) {

    //往页面id=sanji的div里面放三个下拉列表

    var str="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";

    $("#sanji").html(str);

    fillsheng();    //页面加载完，自动执行三个方法

    fillshi();

    fillqu();

    $("#sheng").change(function(){    //当id=sheng的div改变时，触发市和区的方法

        fillshi();

        fillqu();

        });

        $("#shi").change(function(){   //当id=shi的div改变时，触发区的方法

            fillqu();

            });

    //造一个填充省的方法

    function fillsheng()

    {

        pcode="0001";     //数据库中省份的parentareacode都是0001

        $.ajax({

            async:false,                        //因为要同时执行下边函数，所以这里要设置为同步。

            url:"sanjichuli.php",

            data:{pcode:pcode},

            type:"POST",

            dataType:"text",

            success:function(data){

                var hang=data.split("|");  //hang是二维数组

                var str="";

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

                {

                    var lie=hang[i].split("^");

                    str=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                    }

                $("#sheng").html(str);

                }

            });

        }

        //添加一个市的方法

        function fillshi()

        {

            pcode=$("#sheng").val();              //代号取上一级的value值

            $.ajax({

                async:false,                         //为了下边的区能执行，这里要设置为同步

                url:"sanjichuli.php",

                data:{pcode:pcode},

                type:"POST",

                dataType:"text",

                success: function(data)

                {

                    var hang=data.split("|");

                    var str="";

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

                    {

                        var lie=hang[i].split("^");

                        str=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                        }

                    $("#shi").html(str);

                    }

                });

            }

         //添加一个区方法

        function fillqu()

        {

            pcode=$("#shi").val();

            $.ajax({

                url:"sanjichuli.php",

                data:{pcode:pcode},

                type:"POST",

                dataType:"text",

                success:function(data)

                {

                    var hang=data.split("|");

                    var str="";

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

                    {

                        var lie=hang[i].split("^");

                        str=str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                        }

                    $("#qu").html(str);

                    }

                });

            }

});

3.做一个处理页面

<?php

$pcode=$_POST['pcode'];

include("DBDA.class.php");

$db=new DBDA();

$sql="select * from chinastates where parentareacode='{$pcode}'";

echo $db->StrQuery($sql);

AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；的更多相关文章

  1. [原] XAF 添加日期筛选下拉选择

    1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...

  2. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  3. 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  4. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

  5. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  6. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  7. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  8. openerp模块收藏 移除下拉选择列表中的“创建并编辑”链接（转载）

    移除下拉选择列表中的“创建并编辑”链接 原文:http://shine-it.net/index.php/topic,5990.0.html 有时希望下拉列表中列出的项是与主表某个字段关联的,用户只能 ...

  9. selenium的下拉选择框

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

随机推荐

  1. 9----Lua中的面向对象

    什么是面向对象? 使用对象.类.继承.封装.消息等基本概念来进行程序设计 面向对象最重要的两个概念就是:对象和类 对象是系统中用来描述客观事物的一个实体,它是构成系统的一个基本单位 一个对象由一组属性 ...

  2. cocos2dx 动画显示异常

    最近遇到一个问题 好多cocostudio导出的动画 显示都会有异常 很明显的融合方式 把混合方式里面的 src 改成one dst 改成 one-src alpha 解决 后面附上同行的文章 浅显易 ...

  3. Oracle 优化 - CPU 问题

    作为 OLTP 应用,一般不太有 CPU 问题,比较少 - 毕竟大多数问题都是 IO 引起:但是偶尔也会有. 问题判断 很简单 - OS 出现 CPU 很高的问题,持续高于 90% 应用可能会表现慢 ...

  4. HBase之show table

    import org.apache.hadoop.hbase.HTableDescriptor; import org.apache.hadoop.hbase.TableName; import or ...

  5. drupal前端开发的第一点

    就是把admin/config/development/performance下面的选项全部去掉,方便作为一个匿名用户来访问,不用每次都drush cc all.

  6. GUI 测试

    图形用户界面( GUI )对软件测试提出了有趣的挑战,因为 GUI 开发环境有可复用的构件,开发用户界面更加省时而且更加精确.同时, GUI 的复杂性也增加了,从而加大了设计和执行测试用例的难度.因为 ...

  7. 补psp进度（11月4号-9号）

    这周psp进度 11月4号 内容 开始时间 结束时间 打断时间 净时间 小伙伴聊天实现 9:45 10:49 0 64m 学习HttpURLConnection 14:13 15:48 10m 85m ...

  8. github 使用教程初级版

    github 是一个基于 git 的代码托管平台,付费用户可以建私人仓库,免费用户只能使用公共仓库.对于一般人来说公共仓库就已经足够了,而且也没多少代码来管理.下面简单介绍如何使用 github,供初 ...

  9. 0506--Scrum项目1.0

    应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 团队项目选题  四则运算 NABCD 模型 1) N (Need 需求) ...

  10. 自定义控件之 Combobox

    var ComboboxObj = function (id, url) { this.URL = url; //Ajax url this.ID = id; //combobox id this.m ...