javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。
現在、以下のようなフォームを作成しました。
<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年
<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月
<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?
よろしくお願いします。
No.3ベストアンサー
- 回答日時:
こんな感じで・・・
<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年
<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月
<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>
No.2
- 回答日時:
optionのselectedにtrueを設定すれば選択状態になります。
たとえば、
<script type="text/javascript">
window.onload = function() {
var today = new Date();
var year = today.getYear();
var month = today.getMonth();
var day = today.getDate();
selectOption(document.フォーム名.year, year);
selectOption(document.フォーム名.month, month+1);
selectOption(document.フォーム名.day, day);
};
function selectOption(obj, value) {
for (var i = 0, len = obj.length; i < len; i++) {
if (obj[i].value == value) {
obj[i].selected = true;
return;
}
}
}
</script>
とか。
No.1
- 回答日時:
<script type="text/javascript">
<!--
window.onload = function(){
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var options=document.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
if(options[i].text==year)
options[i].selected="selected";
if(options[i].text==month)
options[i].selected="selected";
if(options[i].text==day)
options[i].selected="selected";
}
}
// -->
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript jsでは、'で区切った部分を改行することはできない。〇か×か。 1 2022/06/26 19:58
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
このQ&Aを見た人はこんなQ&Aも見ています
-
「環境が人を育てる」って本当?環境によって人格や生き方は本当に変わるのか
環境が人生に与える影響は実際どれほどのものなのか、専門家の田宮由美さんに伺った。
-
リクエストに応じたselectedの初期値設定方法
Java
-
セレクトボックスのselected属性の値について
HTML・CSS
-
servletからjspへオブジェクトの配列情報を送る方法
Java
-
-
4
Selectの中身をfor文で入れる
JavaScript
-
5
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
6
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
7
JSPでのリストボックス表示
Java
-
8
tableタグとformタグの組み合わせ
HTML・CSS
-
9
JSPで<SELECT>の中にDBから持ってきたデータを反映させたい
Java
-
10
範囲外の数値を代入したらエラーを出して止まるようにしたい
Java
-
11
単一グループのグループ関数ではありません。
Oracle
-
12
ServletからServletへの値渡し
Java
-
13
JavaScript window.openで開く際、そのwindowの背景色を指定したい
JavaScript
-
14
DBを10件毎に表示ページング処理方法
Java
-
15
Java-jspの画面入力値保持について
Java
-
16
プルダウンで選択すると、DBの値を取得したい
JavaScript
-
17
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
-
18
日付型のフィールドに空白を入れる方法を教えてください
その他(データベース)
-
19
confirmのOK・キャンセルを押した後の操作制御
JavaScript
-
20
セレクトボックスの初期選択状態(SELECTED)を動的にしたいのですが
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
Selectボックスの一覧表示方法
-
selectを変更不可にしたい
-
検索窓とプルダウンメニュー機...
-
ラジオボタンとプルダウンを連...
-
全てのselect要素をデフォルト...
-
【JavaScript】プルダウンで数...
-
子ウインドウから親ウインドウ...
-
select要素のvalueを配列で取得...
-
javascriptでセレクトボックス...
-
JavaScriptで<select>の<option...
-
複数のプルダウンを1つにまとめ...
-
selectのすべての値を送信する方法
-
プルダウンメニューに連動する...
-
<input>の選択肢をプルダウンメ...
-
スマホのフォームでのselect複...
-
<select> をmultiple にしてい...
-
同じ名前のセレクトがある場合...
-
セレクトボタンで特定の項目で...
-
return falseが効かない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
連想配列を使ってコンボボック...
おすすめ情報