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.zzzyk.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>
&nbs

补充：web前端 , JavaScript ,