出産前後の痔にはご注意!

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ではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

A 回答 (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>
    • good
    • 6
この回答へのお礼

具体的なソースまでいただいてありがとうございます。
大変参考になりました。

お礼日時:2010/10/01 06:24

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>
とか。
    • good
    • 2
この回答へのお礼

ご回答ありがとうございました。
無事に解決することができました。

お礼日時:2010/10/01 06:25

<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>
    • good
    • 0
この回答へのお礼

ありがとうございました。
無事に解決することができました。

お礼日時:2010/10/01 06:25

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q

HTML の <FORM> の

<SELECT>
<OPTION VALUE="11">AAA</OPTION>

の<OPTION >を JavaScript で設定しようと考えています。

方法ご存知の方いらっしゃいましたら、御教授願います。

また、JavaScript のメソッド/プロパティが網羅的に記述されている Web Page 等ありましたら、ぜひURLを教えてください。


よろしくお願い致します。

Aベストアンサー

> の<OPTION >を JavaScript で設定しようと考えています。

例えば、こんな感じでやります。

<form name="F">
<select name="S">
</select>
</form>

<!-- ★★★★★★ ここから -->
<script type="text/JavaScript">
S = document.X.S;
if (S.options.length < 1) {
S.options[0] = new Option("ラベル1", "値1");
S.options[1] = new Option("ラベル2", "値2");
S.options[2] = new Option("ラベル3", "値3");
history.go(0);
}
</script>
"ラベルn" が属性 label に対応し、"値n" が属性 value に対応します。

> また、JavaScript のメソッド/プロパティが網羅的に記述されている Web Page 等ありましたら、ぜひURLを教えてください。

私は、本家のページ(→参考URL)を良く見ます。

参考URL:http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm

> の<OPTION >を JavaScript で設定しようと考えています。

例えば、こんな感じでやります。

<form name="F">
<select name="S">
</select>
</form>

<!-- ★★★★★★ ここから -->
<script type="text/JavaScript">
S = document.X.S;
if (S.options.length < 1) {
S.options[0] = new Option("ラベル1", "値1");
S.options[1] = new Option("ラベル2", "値2");
S.options[2] = new Option("ラベル3", "値3");
history.go(0);
}
</script>
"ラベルn" が属性 label に対応し、"値n" が属...続きを読む

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QJava-jspの画面入力値保持について

画面にテキスト、ラジオボタン、リストボックス とボタンがあります。
ボタンを押すと、JAVAで処理を行い、jspのviewで表示します。

1.テキスト、ラジオボタン、リストボックスなどに値が入力、設定されている状態で
ボタンを押して処理後にテキスト、ラジオボタン、リストボックスの値が
変わらないようにしたいのですが、
その場合、たとえば、入力、設定値をセッションになどに格納しておき
jspの所で、セッションから値を設定すると言うような方法になるのでしょうか?

2.ボタン押して処理後、ラジオボタン、リストボックスの選択値も
  変えないようにしたいのですが、
  これはどのように実現するのが、適切なのでしょうか?


以上、よろしくお願いします。

Aベストアンサー

ボタンというのはフォームのサブミットボタンのことですよ?
つまり、画面遷移が起きることを前提とすると(元の同じ画面に戻るのも含みます)

テキスト、ラジオボタン、リストボックスの状態を「要求パラメータ」として
送信し、それを次画面に反映するというのが最も一般的な方法です。

フレームワーク struts のアクションフォーム&JSPカスタムタグを使うと比較的楽に
そういう画面が作れますが、多くのフレームワークでも大差ありません。
簡単な画面なら素のサーブレート+JSPでも十分作れます。

セッションでもできますが、 セッションはログイン情報などの保持など、
限定された範囲で使うのが普通です。また、結局セッションに最新の
テキスト、ラジオボタン、リストボックスの状態を送るには、「要求パラメータ」
を送信する必要があります。

AJAXを使うという方法もあります。この場合、ボタンは AJAX 処理だけを行い
画面遷移を起こさないので、サーバ側で画面のテキスト、ラジオボタン、
リストボックスの状態をもつ必要はありません。

QJSPの処理の途中で、JavaScriptの処理をしたい

プログラムをJSPで記述している(<% %>タグ)のですが、
JavaScriptのalertやconfirmなどのポップアップするダイアログを
表示したいのです。それは可能なのでしょうか?

Aベストアンサー

No.2の回答に対する回答(変な日本語ですが)です。

JSPとJavaScriptの処理の行われる順番について考えていないと
エラーになることがありますよ。
大まかな流れは、
 JSPのソースをサーバ側で解釈、実行する(HTMLのソースを吐き出す)
  ↓
 クライアントに生成したソースを送信する
  ↓
 クライアント側のブラウザがソースを解釈する
  ↓
 ソースの中のJavaScriptを、ソースの上のほうから順次実行する
  ↓
 同時に、通常の表示(HTMLの解釈)も実行される

 と、こういう流れですので、例えば、JavaScriptで値を入力し、
JSPでその値を使おうとすると、エラーとなります。

 具体的にやりたいこと(やろうとしていること)を書いていただいたほうが
適切に回答できますが、上記が今考えられるエラーの原因です。

Qjavascriptでselectボックスの

javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。

データが1件の場合、複数件の場合とで分けて、
<OPTION>要素数を取得する処理を記述していますが、
データが1件の場合、
document.getElementsByName("sel").length
で正しい値が取得できません。

詳しくは下記のソースを参照していただきたいのですが、
(1)、(2)、(4)は、正しい値'5'ですが、
(3)だけ誤った値'1'になります。

これはなぜでしょうか?
javascript初心者のため、初歩的な質問かもしれませんが、
教えていただけたら嬉しいです。
よろしくお願い致します。

--------------------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
  function getSelLen(){
var oForm = document.form1;
var sObj;
var sObj2;

//チェックボックスの数でデータが複数件か1件か判別しています。
if(oForm.chk.length){//データが複数件の場合
for ( var i = 0; i < oForm.chk.length; i++ ) {
sObj=document.getElementsByName("sel")[i];
alert("(1) "+ sObj.length);//・・・・(1) 正
sObj2=oForm.elements["sel"][i];
alert("(2) "+ sObj2.length);//・・・・(2) 正
}
}else{//データが1件の場合
sObj=document.getElementsByName("sel");
alert("(3) "+ sObj.length);//・・・・(3) 誤
sObj2=oForm.elements["sel"];
alert("(4) "+ sObj2.length);//・・・・(4) 正
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<TABLE>
<TR>
<TD>
<INPUT type="checkbox" name="chk" >
</TD>
<TD>
<SELECT name="sel" >
<OPTION value="" selected>
<OPTION value="00">00
<OPTION value="01">01
<OPTION value="02">02
<OPTION value="03">03
</TD>
</TR>
<!-- 複数件の場合 以下のコメントアウトを解除する -->
<!--
<TR>
<TD>
<INPUT type="checkbox" name="chk" >
</TD>
<TD>
<SELECT name="sel" >
<OPTION value="" selected>
<OPTION value="00">00
<OPTION value="01">01
<OPTION value="02">02
<OPTION value="03">03
</TD>
</TR>
-->
</TABLE>
</FORM>
<FORM name="form2">
<INPUT type="button" onClick="getSelLen()" value=" selectの要素数 ">
</FORM>
</BODY>
</HTML>

javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。

データが1件の場合、複数件の場合とで分けて、
<OPTION>要素数を取得する処理を記述していますが、
データが1件の場合、
document.getElementsByName("sel").length
で正しい値が取得できません。

詳しくは下記のソースを参照していただきたいのですが、
(1)、(2)、(4)は、正しい値'5'ですが、
(3)だけ誤った値'1'になります。

これはなぜでしょうか?
javascript初心者のため、初歩的な質問かもしれませんが、
教えていた...続きを読む

Aベストアンサー

getElementsByName()は必ず配列になりますから、
<select name="sel">が1つであっても、<select>を1つだけ取得したい場合は[0]という指定が必要です。


}else{//データが1件の場合
sObj=document.getElementsByName('sel')[0]; // 訂正箇所
alert("(3) "+ sObj.length);//・・・・(3) 誤


sObj.lengthの値は、
sObj=document.getElementsByName('sel')とした場合は<select name="sel">の個数、
sObj=document.getElementsByName('sel')[0]とした場合は、1つめの<select name="sel">の<option>の個数になります。



この動作(配列になるかならないか)はform.elements['sel']の動作と異なります。



なお、複数のフォームフィールドに同じnameが指定されていても問題ありません。
それで送信に失敗する場合は、通常はデータを受け取るCGIアプリケーションのバグです。

PHPで受け取る場合は、通常はname="name[]">のように四角カッコを付ける必要がありますが、HTMLとしては文法違反になります。
<select>に multiple を指定する場合も四角カッコが必要です。

getElementsByName()は必ず配列になりますから、
<select name="sel">が1つであっても、<select>を1つだけ取得したい場合は[0]という指定が必要です。


}else{//データが1件の場合
sObj=document.getElementsByName('sel')[0]; // 訂正箇所
alert("(3) "+ sObj.length);//・・・・(3) 誤


sObj.lengthの値は、
sObj=document.getElementsByName('sel')とした場合は<select name="sel">の個数、
sObj=document.getElementsByName('sel')[0]とした場合は、1つめの<select name="sel">の<option>の個数になり...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング