开发学院网页设计 JavaScript jQuery 选择下拉切换内容,以日期为条件显示内容阅读

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

　2012-06-02 15:17:16　来源：WEB开发网　　　

核心提示：思路:1.获取当前日期的年月日2.捕捉被选中的状态3.下拉与内容,能达成通信知识点总结:1) dates=new Date().getDate() //获取当前日期2) year=new Date().getFullYear() //获取当前年3) option:contains(x) //表示在option阵列中查

思路:
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() //隐藏

<!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, 就好比黑板只有一块,擦除以前的信息,显示新信息	
			$(".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>