質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.13%

PHP JavaScript 非表示の状態からプルダウンメニューで選択し、 内容を表示させたい

解決済

回答 3

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 1,524
hiro0208

score 56

イメージ説明
画像1
↓
イメージ説明
画像2 

画像1.画像2のように非表示の状態からプルダウンメニューで選択し、 
javascriptを使い内容を表示させたいです。


送信ボタンに関数をあてがいましたが上手くいきませんでした。。。
初歩的な質問で申し訳ないですが、ご親切な方おりましたらご教授いただけないでしょうか？よろしくお願いいたします。



<?php
$d = date('Y/m');
list($year, $month) = explode('/', $d);
$thisYear=$year;

if(isset($_POST['year'])) $year = $_POST['year'];//isset変数:有true無false
if(isset($_POST['month'])) $month = $_POST['month'];

$optionYear = "";
for ($i=($thisYear-10); $i<=($thisYear+10); $i++) {
    $selected = ($i == $year)?" selected":"";//真:selected    偽:""空 //三項演算子
    $optionYear .= '<option value="' . $i . '"' . $selected . '>' . $i . '</option>' . "\n"; 
}
$optionMonth="";
for($i=1;$i<=12; $i++) {
    $selected=($i==$month)?" selected":"";
    $optionMonth .= '<option value="' . $i . '"' . $selected . '>' . $i . '</option>' . "\n"; 
}
$weekday = array ('日' ,'月' ,'火' ,'水' ,'木' ,'金' ,'土' );

$s = '<table border="1"><tr>';
for($i = mktime(0 ,0 , 0, $month, 1,$year);$i<mktime(0, 0, 0, $month+1 ,1 ,$year);$i+=60*60*24) {//タイムスタンプmktime,加算代入
    $s .= "<td>".date('Y/m/d',$i)."</td><td>".$weekday[date('w',$i)]."</td></tr>";
}
$s .= "</table>";
//var_dump($s);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>日付曜日</title>
</head>
<h2>日付(選択出力)</h2>
<form method="post">
<select name="year"><?php echo $optionYear; ?></select>年
<select name="month"><?php echo $optionMonth; ?></select>月
<input type="submit"  name="btn" value="送信" onClick="show">
</form>
<p id= "disp" class="hyoji" <?php echo $s; ?></p>
</body>
<style>
.hyoji {
display: none;
}
</style>

<script type="text/javascript">
function show() {
    //alert('A');
    document.getElementById("disp").style.display="block";
}
</script>
</html>
コード

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert2 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    kei344

    2017/02/19 19:18

    JavaScriptの記述がありませんが、どのようなコードを書かれているかを追記されたほうが回答を得やすいと思います。

    キャンセル

  • hiro0208

    hiro0208

    2017/02/20 10:27 編集

    ありがとうございます。<style>タグの下にJavaScriptの記述しました。ただ、、アラートも出せなく記述自体が間違っているので消していました。

    キャンセル

回答 3 件

+2

とりあえずシングルクォーテーションで変数を囲んでも
展開されないのでそれなりの処理が必要

'<option value="' . $i . '"$selected>'
↓↓↓
'<option value="' . $i .'"'. $selected.'>'

もともとダブルクォーテーションでやるように回答したと
思いますが・・・

 追記

まず、テーブルの上のレベルで表示をdisplay:noneにしてしまうと、
表示させようがありません。意味のないクラスなのでやめてください。
そもそも考え方が間違っています、出力して表示しないのではなくて
出力しないことが妥当でしょう

$sの出力条件を追加(とりあえず$_POST["year"]だけチェックしていますが
厳密にやりたいならmonthやそれぞれの有効値のチェックまで必要になります) 

$s ="";
if(isset($_POST["year"])){
$s.= '<table border="1"><tr>';
for($i = mktime(0 ,0 , 0, $month, 1,$year);$i<mktime(0, 0, 0, $month+1 ,1 ,$year);$i+=60*60*24) {//タイムスタンプmktime,加算代入
    $s .= "<td>".date('Y/m/d',$i)."</td><td>".$weekday[date('w',$i)]."</td></tr>";
}
$s .= "</table>";

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/20 11:24

    変数がいきていいないですね。。。

    キャンセル

  • 2017/02/20 13:22

    とりあえず
    .hyoji {display: none;}
    をやめてください。
    $sの出力条件をつければよいでしょう。
    追記しておきます

    キャンセル

check解決した方法

0

<?php
$array_week = array('日', '月', '火', '水', '木', '金', '土');
$year = date('Y');
$month = date('n');
$start = $year - 10;
$end = $year + 10;
//年のプルダウン
for ($i = $start; $i <= $end; $i++) {
$option_year .= '<option value="' . $i . '">' . $i . '</option>' . "\n";
}
//月のプルダウン
for ($i = 1; $i <= 12; $i++) {
$option_month .= '<option value="' . $i . '">' . $i . '</option>' . "\n";
}
?>
<form action="" method="post">
<select name="year">
<?php echo $option_year; ?>
</select>年
<select name="month">
<?php echo $option_month; ?>
</select>月
<input type="submit" name="btn" value="送信">
</form>
<?php
if (isset($_POST['btn'])) {
$year = $_POST['year'];
$month = $_POST['month'];
//プルダウンで選択された年・月の日数のタイムスタンプを取得
$timestamp = mktime(0, 0, 0, $month, 1, $year);
//日数を取得(繰り返す日数)
$days = date('t', $timestamp);
echo '<table border="1">' . "\n";
for ($i = 1; $i <= $days; $i++) {
//選択年の月の日数(月末)のタイムスタンプ
$timestamp = mktime(0, 0, 0, $month, $i, $year);
//タイムスタンプから日付を取得
$date = date('m/d', $timestamp);
//タイムスタンプから曜日の取得
$week = date('w', $timestamp);
echo '<tr>' . "\n"
. '<td>' . $date . '</td>' . "\n" 
. '<td>' . $array_week[$week] . '</td>' . "\n"
. '</tr>' . "\n";
}
echo '</table>' . "\n";
}
?>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

送信ボタンに関数をあてがいましたが上手くいきませんでした

書くなら onClick="show()" ですが、関数が実行されたとしてもすぐページが変わってしまい（＝Formを送信する動作）意味は有りません。

PHPからしか取得できない情報なのであれば、JavaScriptを介さずにPHPだけで機能を作成されたほうが良いですし、そうで無いのであればプルダウンのchangeイベントを拾ってJavaScriptでテーブルを組むのが良いでしょう。

【セレクトボックスの日付を切り替え | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website】
http://shanabrian.com/web/javascript/change-day.php

【簡単にHTMLの年月日のプルダウンを作る方法 - ITS】
https://its-office.jp/blog/js/2016/03/08/ymd-html.html

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る