您的位置：首页 > Web前端 > JavaScript

AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

2016-12-27 14:37 645 查看
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);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航