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內的所有p, 就好比黑板隻有一塊,擦除以前的信息,顯示新信息 www.aiwalls.com   
            $(".calendar_bottom").children("p").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月的信息–>   
    <p 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
      –> 
     <p id="January" style="display:none"> 
     <span><strong>1</strong>月份的信息</span> 
     </p> 
      
     <p id="February" style="display:none"> 
    <span><strong>2</strong>月份的信息</span> 
     </p> 
      
     <p id="March" style="display:none"> 
     <span><strong>3</strong>月份的信息</span> 
     </p> 
      
     <p id="April" style="display:none"> 
    <span><strong>4</strong>月份的信息</span> 
     </p> 
      
     <p id="May" style="display:none"> 
     <span><strong>5</strong>月份的信息</span> 
     </p> 
      
     <p id="June" style="display:none"> 
     <span><strong>6</strong>月份的信息</span> 
     </p> 
      
    <p id="July" style="display:none"> 
    <span><strong>7</strong>月份的信息</span> 
    </p> 
      
     <p id="August" style="display:none"> 
     <span><strong>8</strong>月份的信息</span> 
     </p> 
      
     <p id="September" style="display:none"> 
     <span><strong>9</strong>月份的信息</span> 
     </p> 
      
     <p id="October" style="display:none"> 
     <span><strong>10</strong>月份的信息</span> 
     </p> 
      
     <p id="November" style="display:none"> 
     <span><strong>11</strong>月份的信息</span> 
     </p> 
      
     <p id="December" style="display:none"> 
     <span><strong>12</strong>月份的信息</span> 
     </p>  
      
    </p> 
     <!–1月到12月的信息 End–>   
 
</body> 
</html> 

 

 

摘自 StellaAh的專欄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *