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

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

ただいまの
回答率

88.64%

日付プルダウン処理(他のやり方)について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,342

sky.user.

score 15

お世話になっております。
以前の日付プルダウン処理(リンク内容)に関してです。

おかげさまで、完成させることができました!ありがとうございます。
やり方としては、onloadの時だけ年のメソッドの中の最後に、月のメソッドを呼び出す際に
引数を渡す、というものになりました。(※日も同様)
onchangeの時には何も引数を渡さない、ということです。

一応できたのは良いのですが、これだと保守性・拡張性、メソッドの独立性に欠けると思いまして、
このたび質問させていただきました。

今回やろうとしているやり方は、onload時、onchange時どちらもプルダウンを生成するには
変わりありませんが、onload時にだけ、現在の年月日を設定するメソッドを使用する、という
ものです。

一応作ってはみたのですが、★の部分で渡す1つめの引数で詰まってしまっています。。。
おそらくDOM要素の読み込みタイミングの問題なのだと思います。
(プルダウンを作るメソッドは前回の質問と同じなので省略させていただきます。すみません。)

このやり方・方向性は間違っているのでしょうか?
申し訳ありませんが、よろしくお願いします。

// 現在年
var NowYear = (new Date()).getFullYear();

// 現在月
var NowMonth = (new Date()).getMonth() + 1;

// 現在日
var NowDate = (new Date()).getDate();

window.onload = function() {
    setSelectYear();

    //★
    setToday(document.getElementById("selectYear"),NowYear);
    setToday(document.getElementById("selectMonth"),NowMonth);
    setToday(document.getElementById("selectDate"),NowDate);
}

/*
 * onload時に、今日の日付(年月日)にセットするメソッド
 */
function setToday(option, Now) {
    for(i = 0; i < option.length(); i++){

        if(i = Now){
            option.selected = (Now);
            break;
        }
    }
}

/*
 * 年のoptionを更新
 */
function setSelectYear() {

    // selectボックスIDからElementの取得
    var selectElement = document.getElementById("selectYear");

    // 現在~5年前分まで回す
    for (var y = NowYear; y >= NowYear - 5; y--) {

        // <option>要素を追加
        var option = document.createElement("option");

        // optionのvalue属性を設定
        option.value = y;

        // リストに表示するテキストの設定
        option.text = y;

        // セレクトボックスにオプションを追加
        selectElement.appendChild(option);
    }
    setSelectMonth();
}

/*
 * 月のoptionを更新
 */
function setSelectMonth() {

    // selectボックスIDからElementの取得
    var selectElement = document.getElementById("selectMonth");

    // 要素削除用
    var child;

    while (child = selectElement.firstChild) {
        selectElement.removeChild(child);
    }

    // 12ヶ月分回す
    for (var m = 1; m <= 12; m++) {

        // <option>要素を追加
        var option = document.createElement("option");

        // optionのvalue属性を設定
        option.value = m;

        // リストに表示するテキストの設定
        option.text = m;

        // セレクトボックスにオプションを追加
        selectElement.appendChild(option);

        // 現在の日を引数に渡さないsetSelectDateを実行
        setSelectDate();
    }
}

/*
 * 日のoptionを更新
 */
function setSelectDate() {

    // 選択された年を取得
    var y = document.form1.selectYear.options[document.form1.selectYear.selectedIndex].value;

    // 選択された月を取得
    var m = document.form1.selectMonth.options[document.form1.selectMonth.selectedIndex].value;

    // 閏年なら
    if (m == 2 && (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0))) {

        // 2月の閏年
        var last = 29;

        // それ以外なら
    } else {
        var lastday = new Array(11);
        lastday = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
        last = lastday[m - 1];
    }

    // 要素取得と初期化
    var selectElement = document.getElementById("selectDate");

    // 要素削除用
    var child;

    // セレクトボックスの子要素を取得しつつループ
    while (child = selectElement.firstChild) {

        // セレクトボックスから子要素を削除
        selectElement.removeChild(child);
    }

    // 1日から月の最終日まで回す
    for (var d = 1; d <= last; d++) {

        // <option>要素を追加
        var option = document.createElement("option");

        // optionのvalue属性を設定
        option.value = d;

        // リストに表示するテキストの設定
        option.text = d;

        // セレクトボックスにオプションを追加
        selectElement.appendChild(option);
    }
}
<FORM id = "form1">
<td><select name="year" id="selectYear" onchange="setSelectMonth()">
</select><select name="month" id="selectMonth" onchange="setSelectDate()">
</select><select name="date" id="selectDate">
</select></td>
</FORM>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2018/11/15 14:14

    失礼、表現が悪かったですね。読み込み記述の位置です。あと気になるのがhtmlが中途半端に提示されているので全体がわからないところですね。tdの中にある・・・ということですが複数selectがあったりしませんよね?tdなくても再現可能であれば余計な詮索を強いるのでselectだけ置いてあったほうが良いように思います。

    キャンセル

  • m.ts10806

    2018/11/15 14:19

    このコード、そもそもエラー出てますが、そこは認識済みですか?それとも何か記述が抜けていたりするのでしょうか。

    キャンセル

  • m.ts10806

    2018/11/15 14:21

    あ、name=form1でformタグ設置しなきゃいけないみたいですね。了解です。質問はその次のエラー解決となりそうですね。

    キャンセル

回答 1

checkベストアンサー

+1

optionの数をとるなら .options.length ですね。
ただ、これだけでも解決しません。
なぜならsetToday()で回しているiはあくまでoptionの数だけしか回しません。
optionのバリューはそれぞれの年月日がそのまま入っています。
Nowには年月日がそれぞれ渡されます。

つまり「デフォルト本日」としたいのであれば、このやり方ではできませんので、
「optionのvalueを見て同じかどうか」とする必要があります。

function setToday(select, Now) {
    for(var i = 0; i < select.options.length; i++){
        if(select.options[i].value == Now){
            select.options[i].selected = true;
            break;
        }
    }
}


selectedは論理型であるため実値ではなくtrue/falseで行います。

参考:

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/15 14:51

    ありがとうございます!無事改善できました。
    JavaScriptはまだ詳しくなく、変数に型がないと聞いていたので、true/falseもないものなのだと
    思い込んでおりました。。。
    貼ってくださったJavaScriptの仕様を読んで勉強します。

    キャンセル

  • 2018/11/15 15:08

    解決されたようで何よりです。
    私が「型」と書いたのはselectのoptionのオブジェクトのプロパティのことです。
    そこはリンク先のドキュメントを確認して、関係ありそうな機能のページも読んでみて理解を深めてください。

    キャンセル

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

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

関連した質問

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