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

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

ただいまの
回答率

90.36%

  • jQuery

    7534questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQueryでの年計算について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 490

subaru_10

score 3

jQueryでプルダウンの年計算を作っているのですがどうしてもわからないところがあります。

$(function() {
for (var i = 2017; i >= 1900; i--) {
$(' .year').append('<option value="' + i + '">' + i + '</option>');
                    }
for (var i = 1; i <= 12; i++) {
$(' .month').append('<option value="' + i + '">' + i + '</option>');
                    }
for (var i = 1; i <= 31; i++) {
$(' .day').append('<option value="' + i + '">' + i + '</option>');
            }
$('.year').change(function () {
                        leapYearCheck();
                    });
$('.month').change(function () {
                        leapYearCheck();
                    });
                });

// うるう年
function leapYearCheck() {
$(' .day').empty();
var y = $(' .year').val();
var m = $(' .month').val();
if (2 == m && (0 == y % 400 || (0 == y % 4 && 0 != y % 100))) {
var last = 29;
} else { 
var last = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)[m - 1];
                    }
for (var i = 1; i <= last; i++) {
$(' .day').append('<option value="' + i + '">' + i + '</option>');
                    }
                }
<?php for ($x = 0; $x < 3; $x++) : ?>
<tr>
<td><input type='text' name='num[<?= $x ?>']>
</td>
<td id="BOW<?= $x ?>">
<select class='year' name='year[<?= $x ?>]'></select>
<select class='month' name='month[<?= $x ?>]'></select>
<select class='day' name='day[<?= $x ?>]'></select>
</td>
</tr>
<?php endfor; ?>


これにいまだとclassを指定しているためひとつのところを変えると複数変わってしまいます。
これをIDをテーブルのtdのほうに連番で置いたのでこれを指定したいのですがjQueryのほうでどうやって繰り返し処理をしたらいいのかわからず止まっています。
できるだけ短い文にしたいのですがなにかいい案があるでしょうか?
ちなみにhtmlのほうは上下にしっかりtbodyなどテーブルを作っています

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+2

leapYearCheck関数に親要素(今回はtdを親にしてます)を渡して、該当のdayのみを更新すればよいかと。

for (var i = 2017; i >= 1900; i--) {
  $('.year').append('<option value="' + i + '">' + i + '</option>');
}
for (var i = 1; i <= 12; i++) {
  $(' .month').append('<option value="' + i + '">' + i + '</option>');
}
for (var i = 1; i <= 31; i++) {
  $(' .day').append('<option value="' + i + '">' + i + '</option>');
}

$('.year').change(function () {
  leapYearCheck($(this).parents('td'));
});

$('.month').change(function () {
  leapYearCheck($(this).parents('td'));
});

/*
// 異なる要素で同じ処理を行う場合、以下のように一つにまとめることも可能です。
$('td')
  .on('change', '.year, .month', function () {
    leapYearCheck($(this).parents('td'));
  });
*/

// うるう年
function leapYearCheck($td) {
  var y = $td.find('.year').val();
  var m = $td.find('.month').val();

  var $d = $td.find('.day');
  $d.empty();

  if (2 == m && (0 == y % 400 || (0 == y % 4 && 0 != y % 100))) {
    var last = 29;
  }
  else { 
    var last = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)[m - 1];
  }

  for (var i = 1; i <= last; i++) {
    $d.append('<option value="' + i + '">' + i + '</option>');
  }
}


https://jsfiddle.net/takmatz/2pco2t6r/

設問とは関係ありませんが、monthの値は「0」スタートではないのですか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/24 23:54

    ありがとうございます!できました!
    monthを0にすると表示も0に変わるかな?と思いelse文のほうをm-1にしました。
    0スタートのほうがよいのでしょうか?

    キャンセル

  • 2017/07/25 00:00

    サーバ側の実装が1月の値は「1」で問題ないのであれば、気にしないでください。

    キャンセル

  • 2017/07/25 00:06

    あーそうですね、そこまで初心者なので考えが及びませんでしたが確かにサーバー側で0から参照してる可能性があるのですね‥
    やはり問い合わせフォームなどは0からのところが多いのですか?
    差し支えなければご回答いただければ‥

    キャンセル

  • 2017/07/25 07:17

    個人的な経験としては1月は「0」を渡していることがほとんどです。
    サーバ側も受け取ったデータを「-1」などせず、そのまま扱えるので。
    ただし、前コメント通り、サーバ側の実装次第ではありますが。

    キャンセル

  • 2017/07/25 11:34

    なるほど、0を渡しているところがほとんどなのですね
    では0に変更し、表示する際には+1し表示したいと思います!

    キャンセル

+2

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <?php for ($i = 0; $i < 3; $i++): ?>
                <div class="ymd">
                    <select class="year" name="year[]">
                        <?php for ($y = 2017; $y > 1900; $y--): ?>
                            <option value="<?php echo $y ?>"><?php echo $y ?></option>
                        <?php endfor; ?>
                    </select>
                    <select class="month" name="month[]">
                        <?php for ($m = 1; $m <= 12; $m++): ?>
                            <option value="<?php echo $m ?>"><?php echo $m ?></option>
                        <?php endfor; ?>
                    </select>
                    <select class="day" name="day[]">

                    </select>
                </div>
            <?php endfor; ?>
        </div>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            function getLastDay(y, m) {
                var date = new Date(y, m + 1, 0);
                return date.getDate();
            }

            $(function () {
                $('.year, .month').on('change', function () {

                    // 選択している年
                    var y = $(this).parent('.ymd').children('.year').val();

                    // 選択している月
                    var m = $(this).parent('.ymd').children('.month').val() - 1;

                    // 年月からその月の晦日(最終日)を判定
                    var d = getLastDay(y, m);

                    // select.day
                    var select_day = $(this).parent('.ymd').children('.day');
                    var opt = $('<option>');
                    opt.prop('value', '').text('----');

                    select_day.empty().append(opt);

                    for (var i = 1; i <= d; i++) {
                        var opt = $('<option>');
                        opt.prop('value', i).text(i);
                        select_day.append(opt);
                    }
                });
            });
        </script>
    </body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/24 23:59

    ありがとうございます!こちらも親要素のdivにふっているのですね!
    やはり$(this)を使いこなすようになるのがお二人のものを見ていると大事だとわかりました!
    ベストアンサーを渡すことができず申し訳ありません
    また回答していただけるとうれしいです!

    キャンセル

  • 2017/07/25 00:03 編集

    コードを書いてもらって、「動いた」で終わらずに、回答してもらったコードについて是非「意味・意図」を読み取ろうと考えながら、読んで見てください。きっと、「なぜこんな書き方しているの?」とかそういう疑問が出てくるはずです。

    キャンセル

  • 2017/07/25 00:12

    はい!しっかりどちらのとこも意味と意図、そして使い方を理解しまた違ったプログラムを作り応用してみたいと思います!
    動いて嬉しかったですがわからないとこも多く、まだまだ楽しめそうで自分で作れる半人前になるまで突っ走りたいです!

    キャンセル

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

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

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

  • jQuery

    7534questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。