您的位置：首页 > 其它

三级联动

2016-07-02 08:23 260 查看

纯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" onchange="refreshCitySelect()"></select>

<select id="citySelect" onchange="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;" onchange="changeYear()">
</select>
<select id="monthSelect" onchange="changeMonth()">
</select>
<select id="daySelect">
</select>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航