BLOG
ブログ

チルチルミチルからのお知らせ・日々の出来事・
アウトプットの場所として日々更新しております。
時々地元クリエイターとのコラボブログもやってます!

2018.07.05

jQuery 選択された年月に合わせて日のプルダウンを制御しよう

4

年月日を選択させたい時ってありますよね?
私もそんな大勢の中の一人です。
その中で困るのが存在しない日を選択されることだと思います。
それが自分の生年月日だったら間違う方に問題があると私は思ってしまうのですが、問題は予約フォームだったりした場合です。

エンドユーザーとしては何気なく日付を選択したつもりでも日付の正当性チェックを組み込み忘れていると、それで通ってしまうという可能性は考えられます。
そうなると困るのは通知を受け取る運営側です。
せっかく自動化しているのに日付の確認をする為にエンドユーザーへ電話をして整合性を取る必要が出てきます。

対策としては上述した日付の正当性チェックを組み込むこと。
他にはdatepicker等のカレンダープラグインを使用するという手もありますね。
今回はそのどれでもなく、プルダウンで「年月」を選択した場合に「日」のプルダウンのoption要素そのものを変更するやり方をご紹介します。

まず最初に組み込んだのがこちらです。

年月が選択された時に処理発生⇒new Date()を使って対象とした年月の最終日を求めて、
option要素をループして求めた最終日を超えたものをremove()しています。
逆に不足している場合は、要素にappend()してoption要素を追加するだけですね。

これで終わりだと思ったのですが、IEでエラーが発生しました。

またIE(´-ω-)=3

remove()を使っちゃ駄目とのこと。
普通に使っていた記憶があるのですが、option要素ではダメ?

そちらをクリアするよりは、やり方を変えた方が早そうなので、remove()を使わない方向で変更しましたのが以下

remove()をやめてhtml()でhtmlコード丸っとごそっと書き換えました。
これで無事にIEでも動くことを確認。
無事完了しました~
それでも日付の正当性チェックは別で行ってくださいね。(・ω・)ノシ

ヨカね!

この記事が面白かったらポチッってください!

関連記事

Contact