2012-03-26 5 views
0

PHPからJavascript/jQueryでこれを行うにはどうすればよいですか?私は開始日から6ヶ月前までに選択リストに値を設定しようとしています。これをPHPからJavaScriptに変換するにはどうすればよいですか?

$startDate = intval($c->getStartDate($pid)); 
    $endDate = strtotime('+6 month', $startDate); 
    $dateSelectList = '<select name="dateSelect" id="dateSelect">'; 
    $count = 1; 
    //populates the select list with the starting date of the course up to the next six months 
    for($date = $startDate; $date <= $endDate ; $date = strtotime('+1 day', $date)) 
    { 
     $dateSelectList .= '<option id="select'.$count.'" value="'.$date.'">'.date('D d F Y', $date).'</option>'; 
     $count++; 
    } 

    $dateSelectList .= '</select>'; 
+2

あなたがこれまでのところが出ていますか? – Zar

+1

JavaScriptがどこに入っているのか見当たりません... –

答えて

3

これを行う方法の1つは、jQueryでajaxを使用することです。だから、最初のステップは、あなたにコードを変更することです:別のファイルに保存し

$startDate = intval($c->getStartDate($pid)); 
$endDate = strtotime('+6 month', $startDate); 
$dateSelectList = ''; 
$count = 1; 
//populates the select list with the starting date of the course up to the next six months 
for($date = $startDate; $date <= $endDate ; $date = strtotime('+1 day', $date)) 
{ 
    $dateSelectList .= '<option id="select'.$count.'" value="'.$date.'">'.date('D d F Y', $date).'</option>'; 
    $count++; 
} 

echo $dataSelectList; 

populate.php

が続いてhtmlページに次のコードを記述すると言います。コードは、あなたがあなたのページに含まjqueryのを持っていて、idを持つselect要素を持っていること= dateSelect

<script> 
$(function(){ 
    $.get('populate.php',function(data) 
    { 
     $('#dateSelect').html(data); 
    } 
}); 
</script> 

上記のコードは、すべてのオプションを返し、にそれを注入ページのロードにpopulate.php呼び出す前提としてい要素を選択してください

+0

これは私がやったことですが、選択リストは私がjqueryで操作する唯一のものではないことに気付きました。 jqueryへのデータ。 –

+0

ええと、私はあなたがここからそれを取ることができることを願っています... – boug

1

ここにあなたのコードのPHP - > javascriptポートでの私の試みです。 6か月間の正確な日数は、その期間の開始日と終了日によって異なります。そのため、正確な6か月の範囲が必要な場合は、関連する各月の日数に基づいてより多くの計算を行う必要があります。以下のコードでは、6ヶ月の時間枠内で182日間と仮定しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
    </head> 

    <script> 
     function newOption(value, text) { 
      var opt = document.createElement('option'); 
      opt.text = text; 
      opt.value = value; 
      return opt; 
     } 

     function formatDate(date) { 
      var da = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'], 
       ma = ['January','February','March','April','May','June','July','August','September','October','November','December'], 
       dr = date.getDate(), 
       wr = date.getDay(), 
       mr = date.getMonth(), 
       yr = date.getFullYear(), 
       dn = da[wr], 
       ds = (dr.toString().length == 1) ? '0' + dr.toString() : dr.toString(), 
       mn = ma[mr], 
       ys = yr.toString(), 
       v = dn + ' ' + ds + ' ' + mn + ' ' + ys; 

      return v; 
     } 

     function PopulateDateSelector(startDate, endDate, selector) { 
      while(selector.length > 0) selector.remove(0); 

      while(startDate < endDate) { 
       selector.add(newOption(startDate.getTime().toString(), formatDate(startDate))); 
       startDate.setTime(startDate.getTime() + (24*60*60*1000)); 
      } 
     } 


    </script> 
    <body> 

     <select id="dateSelector"></select> 

     <script type="text/javascript">    
      var s = document.getElementById('dateSelector'), 
       startDate = new Date(), 
       endDate = new Date(startDate.getTime() + (182*24*60*60*1000)); 
       //182 is estimated number of days in a 6 month period. 

      PopulateDateSelector(startDate,endDate,s); 
     </script> 
    </body> 
</html> 
1

あなたがするべきで検索した、多かれ少なかれそれ:

<html> 
<head> 
    <title>Demo Javascript populing select field</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> 
    <script type="text/javascript" > 
     $("document").ready(function(){ 
      nElement = 6; 
      sList = {}; 
      for (i = 0; i<=nElement; i++) { 
       var now = new Date(); 
       var nextDate = new Date(); 
       nextDate.setMonth(now.getMonth()+(i*6)); 
       var value = nextDate.getMonth()+"/"+nextDate.getFullYear(); 
       sList[value] = value; 
      } 


      $.each(sList, function(key, value){ 
       var option = $("<option></option>").attr("value",key).text(value); 
       $("#demo-select").append(option); 

      }); 
     }); 
    </script> 
</head> 
<body> 
    <select name="demo-select" id="demo-select" ></select> 
</body> 

関連する問題