jQuery选择下拉切换内容,以日期为条件显示内容
思路:
1.获取当前日期的年月日
2.捕捉被选中的状态
3.下拉与内容,能达成通信
知识点总结:
1) dates=new Date().getDate() //获取当前日期
2) year=new Date().getFullYear() //获取当前年
3) option:contains(x) //表示在option阵列中查找含有文本含有x的option.
4) attr("x","y")
//表示添加一个属性,属性名为x,属性值为y.
5) val() //获取当前元素的value属性的值
6) $('option:selected', this) //表示: 在当前选择器(this)中选出被选择上的option元素(option被选上了可以用option:selected来表示)
7) $("x").each(function(){...}) //表示x选择器从0开始遍历,直到x选择器的最后一个元素的索引.
8) show() //显示
9) hide() //隐藏
Come from xixifeng.com
By 习习风(StellaAh)
[完整示例]
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 选择下拉切换内容,以日期为条件显示内容|Come from xixifeng.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready
(
function()
{
/*
Come from xixifeng.com
Author: 习习风
*/
//选择下拉切换内容
//初始化变量
var keytypeStr="#keytype";//选择下拉框容器的id值
var keytypeObj=$(keytypeStr); //选择下拉框的容器的选择器
currentMonth=new Date().getMonth()+1; //获取当前月
//dates=new Date().getDate(); //获取当前日期
//year=new Date().getFullYear(); //获取当前年
//alert(currentMonth); //测试获取当前月是否正确
//把当前月的选项设置为选中状态
//语法解释:
//option:contains(x) 表示在option阵列中查找含有文本含有x的option.
//attr("x","y") 表示添加一个属性,属性名为x,属性值为y.
$(keytypeStr+" option:contains('"+currentMonth+"')").attr("selected","selected");
//显示当前月的内容
//分两部来实现
//1) 确定当前月内容所对应的选择器
currentMonthSelector="#"+$("option:contains('"+currentMonth+"')").val(); //val() 获取当前元素的value属性的值
//2) 显示容器
$(currentMonthSelector).show();
//选择器出发事件--当选择下拉出发时...
//$('option:selected', this)表示: 在当前选择器(this)中选出被选择上的option元素(option被选上了可以用option:selected来表示)
//$("x").each(function(){...}); 表示x选择器从0开始遍历,直到x选择器的最后一个元素的索引.
keytypeObj.change(function(){
$('option:selected', this).each(function(){
//确定即将需要显示的容器的选择器
var displayIndexSelect=this.value; //获取当前属性的值
displayIndexSelect="#"+displayIndexSelect;
displayIndexSelectObj=$(displayIndexSelect); //确定选择器
//在播放选中的内容之前先隐藏.calendar_bottom内的所有div, 就好比黑板只有一块,擦除以前的信息,显示新信息 www.2cto.com
$(".calendar_bottom").children("div").hide();//隐藏
displayIndexSelectObj.show(); //显示
});
});
//选择下拉切换内容 end
}
);
</script>
</head>
<body>
<h1>Come from <a href="http://www.xixifeng.com">xixifeng.com</a></h1>
<h2>By 习习风</h2>
<select id="keytype">
<option value="January">1</option>
<option value="February">2</option>
<option value="March">3</option>
<option value="April">4</option>
<option value="May">5</option>
<option value="June">6</option>
<option value="July">7</option>
<option value="August">8</option>
<option value="September">9</option>
<option value="October">10</option>
<option value="November">11</option>
<option value="December">12</option>
</select>
<!--1月到12月的信息-->
<div class="calendar_bottom">
<!--
1月 January 2月 February 3月 March 4月 April 5月 May 6月 June 7月 July 8月 August 9月 September 10月 October 11月 November 12月 December
-->
<div id="January" style="display:none">
<span><strong>1</strong>月份的信息</span>
</div>
<div id="February" style="display:none">
<span><strong>2</strong>月份的信息</span>
</div>
<div id="March" style="display:none">
<span><strong>3</strong>月份的信息</span>
</div>
<div id="April" style="display:none">
<span><strong>4</strong>月份的信息</span>
</div>
<div id="May" style="display:none">
<span><strong>5</strong>月份的信息</span>
</div>
<div id="June" style="display:none">
<span><strong>6</strong>月份的信息</span>
</div>
<div id="July" style="display:none">
<span><strong>7</strong>月份的信息</span>
</div>
<div id="August" style="display:none">
<span><strong>8</strong>月份的信息</span>
</div>
<div id="September" style="display:none">
<span><strong>9</strong>月份的信息</span>
</div>
<div id="October" style="display:none">
<span><strong>10</strong>月份的信息</span>
</div>
<div id="November" style="display:none">
<span><strong>11</strong>月份的信息</span>
</div>
<div id="December" style="display:none">
<span><strong>12</strong>月份的信息</span>
</div>
</div>
<!--1月到12月的信息 End-->
</body>
</html>
摘自 StellaAh的专栏
