2段階プルダウンで年月アーカイブを作りたい

2023/09/07 06:49

このQ&Aのポイント

HTMLの2段階プルダウンを使用して、年月アーカイブを作成する方法について解説します。
プルダウンメニューには、OSの種類とバージョンが表示されます。
選択されたOSによって、バージョンのプルダウンメニューが動的に変更されます。

ベストアンサー

2段階プルダウンで年月アーカイブを作りたい

2022/07/06 15:22

<!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <select name="OS" id="A"> <option value="">OSを選択</option> <option value="Windows">Windows</option> <option value="Android">Android</option> <option value="iOS">iOS</option> <select> <select name="version" id="B"> </select> <script> let versionArray = new Array(); versionArray[''] = new Array('バージョン情報'); versionArray['Windows'] = new Array('XP', 'Vista', '7', '8', '8.1', '10'); versionArray['Android'] = new Array('7 (Nougat)', '8 (Oreo)', '9 (Pie)', '10'); versionArray['iOS'] = new Array('10以下', '11', '12', '13'); function replaceOptions (e, ary) { e.replaceChildren (...ary.map (a=> new Option (a))); }//汎用性を上げるなら new Option (...a)が望ましい e.append (...ops); } function replaceVersion () { replaceOptions (B, versionArray[A.value]); } function handler (event) { let e = event.target; switch (true) { case A == e : replaceVersion (); A.style.display = 'none'; break; } } document.addEventListener ('change', handler, false); replaceVersion (); </script>

php_learn
お礼率35% (472/1333)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

_kappe_
ベストアンサー率68% (1522/2216)

2022/07/06 22:35 回答No.1

いきなりコードだけ貼るのではなく、どういうことをしたくて、何で困っているのかをきちんと言葉で説明してください。

関連するQ&A

2段階プルダウンで表示内容を切り替えたい
下記コードで1段階目の選択を終えた後にdocument.getElementById('').style.display = "none";を使い非表示にしたうえで2段階目の選択を表示させたいのですがどのように作ればよいでしょうか？ ※参考サイト https://bonoponz.hatenablog.com/entry/2020/05/12/%E3%80%90Web%E3%80%91%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%81%A7%E8%A1%A8%E7%A4%BA%E5%86%85%E5%AE%B9%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B ※該当コード <select name="OS"> <option value="">OSを選択</option> <option value="Windows">Windows</option> <option value="Android">Android</option> <option value="iOS">iOS</option> <select> <select name="version"> </select> <script> let versionArray = new Array(); versionArray[''] = new Array('バージョン情報'); versionArray['Windows'] = new Array('XP', 'Vista', '7', '8', '8.1', '10'); versionArray['Android'] = new Array('7 (Nougat)', '8 (Oreo)', '9 (Pie)', '10'); versionArray['iOS'] = new Array('10以下', '11', '12', '13'); document.getElementsByName('OS')[0].onchange = function () { let os = this.value; let elm = document.getElementsByName('version')[0]; elm.options.length = 0; for (let i = 0; i < versionArray[os].length; i++) { let op = document.createElement('option'); op.value = versionArray[os][i]; op.textContent = versionArray[os][i]; elm.appendChild(op); } }; window.onload = function () { document.getElementsByName('OS')[0].onchange(); }; </script>
- ベストアンサー
- JavaScript
javascriptでプルダウンメニューの外部ファイル化について
以下のjavascriptを外部ファイルにしたいのですが、外部ファイル、HTML部分ともに、どのように記述すればいいのか教えて頂けませんでしょうか？よろしくお願いします。 <html> <head> <script language="JavaScript">  </script> </head> <body onLoad="Load();"> <form name="the_form" method="POST" action="" onSubmit="return Check()"> <select name="choose_category" onChange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);"> <OPTION value="果物" selected>果物 <OPTION value="野菜" >野菜 <OPTION value="肉" >肉 <OPTION value="魚" >魚 <OPTION value="酒" >酒 <OPTION value="菓子" >菓子 </select> <select name="the_examples"> <OPTION value="0" selected>りんご <OPTION value="1" >いちご <OPTION value="2" >みかん <OPTION value="3" >ドリアン <OPTION value="4" >ライム </SELECT> <from> </body> </html> また、次のサイト（http://www.carsensor.net/）では「メーカー・地域・価格から探す」からメーカー選択後、車名部分ではそのメーカーに該当するものが選択できますが、これは上の方法とは違うように思うのですが、どういった方法なのでしょうか？
- ベストアンサー
- JavaScript
２つのプルダウンの連動に関して
２つのプルダウンの連動に関して javascript の話になってしまうかと思われますが、教えて下さい。２つのプルダウンを連動させたいと考えていますが、単純に決められた項目を初期値として設定するようなプルダウンであれば問題なくできますが、テーブルから取得したデータをプルダウンにセットした後に制御を掛けたいと考えています。以下のようなソースを活用できないか？と考えていますが、どのような方法があるでしょうか。。。。《活用ソース》 <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=JavaScript>  </SCRIPT> </HEAD> <BODY onLoad="funcMain(false)"> <FORM NAME=formMain METHOD=POST ACTION=result.asp onSubmit="return funcSubmit()"> <SELECT NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(都道府県を選択してください) <OPTION VALUE="0">東京都 <OPTION VALUE="1">大阪府 <OPTION VALUE="2">愛知県 <OPTION VALUE="3">千葉県 </SELECT> <SELECT NAME="city"> <OPTION VALUE="" SELECTED>(市町村を選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> <INPUT TYPE=submit VALUE="登録"> </FORM> </BODY> </HTML>
- ベストアンサー
- PHP
プルダウン選択を変更すると、変更する前に戻るJavaScript
下記のようなJSで、たとえば「ううう」を選択すると、「ううう」を選択する前に戻すには、どうすればいいでしょうか？ <script> function test(value) { 　　if (value == "u") { 　　　　alert("「ううう」を選択することはできません"); 　　　　//ここ↓をどう書けばいいですか？　　} } </script> <select name="test" id="test" onchange="test(this.value);"> <option value="a">あああ</option> <option value="i">いいい</option> <option value="u">ううう</option> <option value="e">えええ</option> <option value="o">おおお</option> </select> 例）・「いいい」を選択　　↓ ・「ううう」を選択　　↓ ・「ううう」を選択することはできません、とアラートを出す。　　↓ ・「いいい」の選択に戻る
- ベストアンサー
- JavaScript
複数のプルダウンメニューの作り方。
・Aリスト、Bリスト…とプルダウンメニューを複数含んだフォームを一つのhtmlに作りたいのですが、上手くいきません。一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。今は、下記の状態になっています。 <script language="JavaScript">  </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form> ご指南の程宜しくお願いします。
- ベストアンサー
- JavaScript
selectボックスの選択結果を変数に代入したい
質問No.8512768の追加質問です。先ほど同じ内容をOgre7077さんの補足に入れて投稿してしまいました。 LancerVIIさん、Ogre7077さんご丁寧な説明を頂き、ありがとうございます。 LancerVIIさんのスクリプトを使ってセレクトボックスの表示内容は完成しました。すごく簡潔になりました。それに追加してOgre7077さんの内部処理のスクリプトを入れてみましたが、 alertで月名がうまく表示出来ません。セレクトボックスで月をセレクトした直後にその年月のカレンダーを表示させたいので月のセレクトボックスにもonhangeを追加しました。勉強不足で大変申し訳ありませんが、下記スクリプトの添削をよろしくお願いします。 <!DOCTYPE html> <html> <head> <meta charset="Shift_JIS"> <style> </style> <script> var monthArray = new Array(); monthArray['y2014'] = new Array ( 1, 2, 3, 4 ); // 2014年が選択された場合に表示する月 monthArray['y2013'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); // 2013年が選択された場合に表示する月 monthArray['y2012'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2011'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2010'] = new Array ( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ); monthArray['y2009'] = new Array ( 10, 11, 12 ); // 2012年が選択された場合に表示する月 function getSelectedText(obj) { var year = obj.options[obj.selectedIndex].value; // 選択された年を取得 var monthObj = document.getElementById('month'); // 月表示用のオブジェクトを取得 if ( year === '' ) { monthObj.length = 1; // 「----」が選択された場合は選択をクリアして処理終了 return; } var month = monthArray['y'+year]; // 年で表示月を取得 monthObj.length = month.length+1; // option用の領域を広げる for ( var i = 0; i < month.length; i ++ ) { monthObj.options[i+1].text = month[i]; // 取得した表示月の分、optionを追加する monthObj.options[i+1].value = month[i]; // 先頭には「--」が存在するためi+1から追加 } monthObj.options[0].selected = true; // 先頭の「--」を選択状態とする } </script> <body> <select name="year" onchange="getSelectedText(this);"> <option value="">----</option> <option value="2014">2014</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> </select><a>年　</a> <select name="month" id="month" onchange="goCalender(this);"> <option value="">--</option> </select><a>月</a> <script>/* function getSelectedText(obj){ var opt = obj.options[obj.selectedIndex]; goCalender.year = opt.text; goCalender(); } function goCalender(obj){ var me = arguments.callee; var selYear = me.year; var selMonth = me,month; alert(selYear + selMonth); }*/ </script> </body> </head> </html>
- ベストアンサー
- JavaScript
二つのプルダウンメニューから違うページにジャンプしたい
以前ここで"steel gray"さんから教えて頂いたのですが、自分で手を加えている内に分からなくなってしまいました。ご指導お願い致します。　　　　　　　　function jump(Form){ //以下、selectの組み合わせとジャンプ先のリスト。 var jumpList = new Array( ['1','A','http://www.k2.dion.ne.jp/~namae/osietea1.html'], ['1','B','http://www.google.co.jp/'], ['2','A','http://www.yahoo.co.jp/'], ['2','B','http://www.infoseek.co.jp/'], ['','','']); for(var i=0;i<jumpList.length;i++) { if(jumpList[i][0] == Form.elements[0].value && jumpList[i][1] == Form.elements[1].value) window.location.href=jumpList[i][2]; } } //--> </script> <OPTION value="A">選択肢A</OPTION> 以下選択肢Aに6種類 <OPTION value="1">選択肢B</OPTION> 以下選択肢Bに9種類合計54種類の条件があります。どこをどの様にすればよいのでしょうか？宜しくお願いします。
- ベストアンサー
- JavaScript
プルダウンからテキストボックスに入力
プルダウンから選択したものをテキストボックスに表示させています。 <script type="text/javascript"> function displayText(thatOption, textId) { var text1 = document.getElementById(textId); text1.value = thatOption.title; } </script> <SELECT onchange="displayText(this.options[this.selectedIndex], 'text1');"> <option value="1" title=""></option>　　＃空欄 <option value="2" title="A">A</option>　＃大文字 <option value="3" title="a">a</option>　＃小文字 </SELECT> <input type="text" value="" id="text1"> プルダウンを２個や５個など複数用意して、それぞれ選択したものをテキストボックス１行に続けて表示させたいです。上記のプルダウンをA～Eまで用意した場合、[A b C D e]と表示させたり、Cは選ばず空欄を選択した場合は、[A b D e]と表示させる事は可能でしょうか？また、テキストボックスにvalue="ZZ"と初期表示を入れて、その後に続くように表示させたいです。 [ZZ A b C D e]とする事は可能でしょうか？
- ベストアンサー
- JavaScript
プルダウンに追加項目を加える方法
過去記事にあった下記のプルダウンを使用させて頂いております。選択できる項目を「くだもの→りんご→●●」ともうひとつ追加するにはどうしたらよいのでしょうか？どうぞよろしくお願いします。 <html> <head> <script>  </script> </head> <body onLoad="initSel()"> 　<form> 　　<p> 　　　メイン：　　　<select name="selMain" size="1" onChange="changeSel()"></select> 　　</p> 　　<p> 　　　サブ：　　　<select name="selSub" size="1"></select> 　　</p> 　</form> </body> </html>
- 締切済み
- JavaScript
プルダウンで選択したページにフォームデータを送る
a.htmlからプルダウンで選択した1～6までのhtmlに、フォームデータを送るということは可能でしょうか？いろいろ組み合わせたりしていますがうまくいきません。どなたかご教授お願い致します。 <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <form name="myFORM"> <SELECT NAME="list"> <OPTION VALUE="1.html" SELECTED>1</OPTION> <OPTION VALUE="2.html">2</OPTION> <OPTION VALUE="3.html">3</OPTION> <OPTION VALUE="4.html">4</OPTION> <OPTION VALUE="5.html">5</OPTION> <OPTION VALUE="6.html">6</OPTION> </SELECT> <INPUT TYPE="TEXT" SIZE="61" NAME="a"> <INPUT TYPE="submit" VALUE="GO" onClick="sendData()"> <INPUT TYPE="reset" VALUE="クリア">
- ベストアンサー
- JavaScript