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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

5766閲覧

プルダウンの値が選ぶ度に増えてしまう

R.lawliet

総合スコア41

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/05/27 02:33

連動のプルダウンを作っています。

うるう対応、現在から17~40年前の日付を選択
選択初期は一番小さな値。

大体出来たのですが、動作チェックで問題が1つ。

年を選ぶ度に月が増え、
月を選ぶ度に日が増えていきます。

つまり日付を例にすると、

lang

11 22 33 4~ 531 61 72 8~ 931

という具合に。

どこかで値を初期化すれば良いのだと思うんですけど、
どのタイミングでどうやって初期化するのか、という点がわかりません。

ご指導頂けると幸いです。

lang

1<!DOCTYPE html> 2<html> 3<head> 4<title>無題 1</title> 5</head> 6<body> 7<!-------- 選択フォーム --------> 8 9<form name="registration"> 10<select name="selectYear" id="selectYear" onchange="setSelectMonth()"></select> 年 11<select name="selectMonth" id="selectMonth" onchange="setSelectDate()"></select> 月 12<select name="selectDate" id="selectDate"></select> 日 13</form>

lang

1<script type="text/javascript"> 2 3/*====[ 現日付を取得 ]====*/ 4 5var Now = new Date(); 6var NowYear = Now.getFullYear(); 7 8/*====[ 関数 : オプションを更新(年) ]====*/ 9 10function setSelectYear(){ 11for(var y=NowYear-40; y<NowYear-17; y++){ 12var selectElement = document.getElementById("selectYear");//selectボックスIDからElementの取得 13var option = document.createElement("option");//<option>要素を追加 14option.value = y;//optionのvalue属性を設定 15option.text = y;//リストに表示するテキストの設定 16selectElement.appendChild(option);//セレクトボックスにオプションを追加 17 18} 19setSelectMonth(); 20} 21setSelectYear(); 22 23/*====[ 関数 : オプションを更新(月) ]====*/ 24 25function setSelectMonth(){ 26for(var m=1; m<=12; m++){ 27var selectElement = document.getElementById("selectMonth"); 28var option = document.createElement("option"); 29option.value = m; 30option.text = m; 31 32selectElement.appendChild(option); 33 34} 35setSelectDate(); 36} 37 38/*====[ 関数 : オプションを更新(日) ]====*/ 39 40function setSelectDate(){ 41//選択された年を取得 42var Year = 43document.registration.selectYear.options[ 44document.registration.selectYear.selectedIndex 45].value; 46//選択された月を取得 47var Month = 48document.registration.selectMonth.options[ 49document.registration.selectMonth.selectedIndex 50].value; 51 52var lastDate = new Date(Year,Month,0).getDate(); 53 54 55 56for(var d=1; d<=lastDate; d++){ 57var selectElement = document.getElementById("selectDate"); 58var option = document.createElement("option"); 59 60 61option.value = d; 62option.text = d; 63 64selectElement.appendChild(option); 65 66} 67} 68</script> 69</body> 70</html>

※一緒のページに書いてるので/bodyと/htmlはscriptのところにあります。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

セレクトボックス内のリストの初期化は以下のようにしてできます。

lang

1var selectElement = document.getElementById("セレクトボックスのID"); 2var child; 3while(child = selectElement.firstChild){ //セレクトボックスの子要素を取得しつつループ 4 selectElement.removeChild(child); //セレクトボックスから子要素を削除 5}

このコードを各セレクトボックス作成前に記述してください。

以下追記

javascriptでは、以下のような形でifもしくはwhileを利用することができます。

lang

1if(変数){ 2} 3 4while(変数){ 5}

このような形で利用する場合、変数が空文字、0、null、undefined、falseの場合に偽と判定されます。
したがって、先ほどのコードでは、

lang

1child = selectElement.firstChild

でセレクトボックスの最初の子要素を取得し、

lang

1while(child){ 2}

で子要素が取得できなくなる(子要素がない場合にはnullになる)までループしています。
この2つを組み合わせて

lang

1while(child = selectElement.firstChild){ 2}

としています。

投稿2015/05/27 02:48

編集2015/05/27 04:03
orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

R.lawliet

2015/05/27 03:16

先日に引き続きありがとうございます♪ お影様で目指していたプルダウンメニューの作成が完成しました! 追記をお願いしたいです。 whileの中はifを作ってbreakという型でしか使ったことが無かったのですが、 これはどういう状態なのでしょうか? 外部からの入力があるからループさせといて大丈夫、という事ですか? つまり、 if(child = selectElement.firstChild){  selectElement.removeChild(child); } これを記述するのとの違いはありますか?
takotakot

2015/05/27 03:17

やってみたら、分かると思いますよ。
R.lawliet

2015/05/27 05:00

分かるようになりました。 ありがとうございます!
haruichinichi

2019/09/04 08:14

同じ件で二日悩んでいたのですが、無事解決し感動しました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問