jQuery 选择下拉切换内容,以日期为条件显示内容

来源：互联网发布：全民枪战开挂软件编辑：程序博客网时间：2024/06/05 03:26

思路:
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)

[完整示例]

<!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.comAuthor: 习习风*///选择下拉切换内容//初始化变量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, 就好比黑板只有一块,擦除以前的信息,显示新信息$(".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>