初めまして。

formのラジオボタンとセレクトボックスで取得した内容を
モーダルウィンドウ内に表示する事はなんとかネット検索で両方出来たのですが、

次にその取得した両方の内容を元にif文を使って
モーダルウィンドウ内にテキストを表示(4パターン)させようと試みていますが
うまくいきません。。。

-----------------------------------------------------------
function(){

if (radio1 == "○○" && check1 == "○○" ){
target.innerHTML = "表示させたいテキスト";

-----------------------------------------------------------

こんな感じでJavascriptを書いています。
初心者なのでメソッドなどネットで検索しても分からず行き詰っています。。

皆様のお力をお貸しください!!!
よろしくお願いします。

質問者からの補足コメント

  • へこむわー

    お二人様回答ありがとうございます。
    ご教授頂いた内容を駆使して進めましたが、またつまづいてしまいました。

    モーダル内にはご教授頂いたテキストの他に
    ラジオボタンから取得した内容のテキストと
    セレクトボックスから取得した内容のテキストをjavascriptで書き出しています。

    この2つをhoge()に合わせるとnodateとなるのです。
    (ラジオボタンとセレクトは取得出来ます)

    コードを持ってきたので見て頂けないでしょうか。。
    甘えてばかりではいけないと昨日よりしておりますが、もう駄目です。
    本当に申し訳ないですが、どうぞよろしくお願いします。

    次の追記に続きます。。

      補足日時:2016/03/01 15:19
  • へこむわー

    CSSはご教授通り使わせてもらってます。

    <style>
    #lean_overlay{position: fixed; z-index:100;top: 0px;left: 0px;height: 100%;width: 100%;
    background: #000;display: none;}
    .modal{display: none;background: none repeat scroll 0 0 #FFC0C0;box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);display: none;padding: 30px;width: 780px;}
    </style>

      補足日時:2016/03/01 15:22
  • へこむわー

    追記文ではコードが入りきれないようなので。。
    新しく質問しなおします。。。

      補足日時:2016/03/01 15:26

A 回答 (5件)

たとえばこんな感じ


<style>
#lean_overlay{
position: fixed; z-index:100;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
}
.modal{
display: none;
background: none repeat scroll 0 0 #FFC0C0;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: none;
padding: 30px;
width: 780px;
}
</style>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.leanModal.min.js"></script>
<script>
function hoge(){
var r=$('[name=r]:checked').val();
var s=$('[name=s]').val();
var list={
"1":{"5":"text_1_5","6":"text_1_6","7":"text_1_7"}
,"2":{"5":"text_2_5","6":"text_2_6","7":"text_2_7"}
,"3":{"5":"text_3_5","7":"text_3_7"}//3の6は設定しなければnodata
};
if(typeof list[r]!=="undefined" && typeof list[r][s]!=="undefined"){
return list[r][s];
}else{
return "nodata";
}
}
$(function() {
$( 'a[rel*=leanModal]').click(function(){
$('#mymodal').html(hoge());
})
$( 'a[rel*=leanModal]').leanModal({
top: 50, // モーダルウィンドウの縦位置を指定
overlay : 0.5, // 背面の透明度
});
});
</script>

<input type="radio" name="r" value="1">1<br>
<input type="radio" name="r" value="2">2<br>
<input type="radio" name="r" value="3">3<br>
</select>
<select name="s">
<option value="">-</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

<a rel="leanModal" href="#mymodal">Modal</a>
<div id="mymodal" class="modal"></div>
    • good
    • 1
この回答へのお礼

ご教授頂きありがとうございます。
yambejp様のコードを使わせて頂きました。
大変助かりました。
こんなに沢山教えて貰っといて大変申し訳ないのですが

【Javascript】(2)formで取得した内容をif文で使いたい…

という内容でまた質問しましたので見て頂けると助かります。。

よろしくお願いします。

お礼日時:2016/03/01 15:47

こちらをお使いでしょうか


http://leanmodal.finelysliced.com.au/

ならば

$(function() {
$('#モーダルを開くaタグのID').click(選んだ内容でモーダル内を書き換える);
$('#モーダルを開くaタグのID').leanModal();
});
function 選んだ内容でモーダル内を書き換える(){
var message = 選んだ内容からモーダルに表示させる文面を選ぶ();
$('#モーダル内の書き換えたいタグのID').text(message);
}
    • good
    • 1
この回答へのお礼

Ogre7077様
度々の質問だったのにも関わらず、丁寧にご教授頂き大変助かりました。
本当にありがとうございます。

この質問の続きで
【Javascript】(2)formで取得した内容をif文で使いたい…
という内容で再質問させて頂きましたのでよろしければ
見て頂けると助かります。。よろしくお願いします。

お礼日時:2016/03/01 15:51

四パターン程度なら、こんな感じでしょうか



<form name=ab action="javascript:選んだ内容でモーダルを開く()">
<p> <label><input type=radio name=a value=1>alpha-1</label> <label><input type=radio name=a value=2>alpha-2</label>
<p> <select name=b><option value=8>beta-8<option value=9>beta-9</select>
<p> <button type=submit>開く</button>
</form>
<script>
function 選んだ内容でモーダルを開く(){
var e = document.forms['ab'].elements;
var a = e['a'].value, b = e['b'].value;
var message = ''; // パターン外も考慮する
if (a == '1' && b == '8') message = 'はるはあけぼの';
if (a == '1' && b == '9') message = 'なつはよる';
if (a == '2' && b == '8') message = 'あきはゆうぐれ';
if (a == '2' && b == '9') message = 'ふゆはつとめて';
開けモーダル(message);
}
</script>
    • good
    • 1
この回答へのお礼

ありがとうございます。とても参考になります。

こんなのも分からないのか!と言われちゃいそうですが。。
質問させてください。

モーダルはフォームで飛ばす方法でなく、
aで開くように設定しています。(送信は別で設置しています。)
使用しているのはネットから持ってきた
jquery.leanModal.min.jsです。

【選んだ内容でモーダルを開く】は何に変更したら良いでしょうか?
メソッド、js言語でご教授頂ければ助かります。

もうひとつですが、
messageのテキストをモーダル内の所定の場所に表示させるのは
下記のjs(現在表示出来ているラジオとセレクトに使っています)を
追加する事で表示できるでしょうか?

window.onload = function onLoad() {
target = document.getElementById(ID名);
target.innerHTML = 選択してください;
}

どうぞよろしくお願いします。

お礼日時:2016/02/29 15:37

>formのラジオボタンとセレクトボックスで取得した内容



あ、申し訳ない
よく見たらセレクトボックスでしたね
であればこんな感じでリストを作っておけばよいかも

<script>
function hoge(r,s){
var list={
"aaa":{"xxx":"axax","yyy":"ayay"}
,"bbb":{"xxx":"bxbx","yyy":"byby"}
};
if(typeof list[r]!=="undefined" && typeof list[r][s]!=="undefined"){
alert(list[r][s]);
}else{
alert("too bad!");
}
}
</script>

<input type="button" value="aaa-xxx" onclick="hoge('aaa','xxx')">
<input type="button" value="aaa-zzz" onclick="hoge('aaa','zzz')">
<input type="button" value="ccc-xxx" onclick="hoge('ccc','xxx')">
    • good
    • 1
この回答へのお礼

ありがとうございます。
丁寧に教えて頂きとても勉強になりました。
今後もっと勉強していこうと改めて思います。
本当にありがとうございました!!

お礼日時:2016/02/29 15:11

ラジオボタンとチェックボックスの組み合わせで処理をするのでしょうけど


チェックボックスは選択肢が一つではないので
>check1 == "○○"
は、さすがにないんじゃないの?
    • good
    • 1

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

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

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

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

Q空欄のテキストフィールドの判定の方法

HTMLのフォームに入力されたテキストフィールドの値より処理を変化させる
ロジックを作ろうと下記のようにプログラムしました。
テキストフィールドに何か入力して送信した場合は、elseの処理を正常に行ってくれるのですが、
未入力でsubmitした場合だと、処理が止まってブラウザ上には真っ白な画面しか表示されません。
やはり判定文が悪いのでしょうか?
未入力のテキストフィールドの判定方法を教えてください。

-----------------------------------------------------
String tf1 = request.getParameter("text1");
String tf2 = request.getParameter("text2");

if((tf1 == null) || (tf2 == null)) {
 HttpSession session = request.getSession();
 session.setAttribute("errmessage", "未入力の項目があります。");

 RequestDispatcher dispatcher
    = request.getRequestDispatcher("/err.jsp");
 dispatcher.forward(request, response);
}
else {
 //テキストフィールドに何かが入力されている場合の処理
}

HTMLのフォームに入力されたテキストフィールドの値より処理を変化させる
ロジックを作ろうと下記のようにプログラムしました。
テキストフィールドに何か入力して送信した場合は、elseの処理を正常に行ってくれるのですが、
未入力でsubmitした場合だと、処理が止まってブラウザ上には真っ白な画面しか表示されません。
やはり判定文が悪いのでしょうか?
未入力のテキストフィールドの判定方法を教えてください。

-----------------------------------------------------
String tf1 = request.getPara...続きを読む

Aベストアンサー

空白の文字列が設定されているはずなので、

if (tf1 == null || tf1.equals("") || tf2 == null || tf2.equals("")) {
  …
}

とした方が良いでしょう。tf1 == null は、フォームの方の記述を間違う
可能性もあるので、念の為残しておきましょう。

Q日付入力欄の表示形式を自動的に「yyyy/mm/dd」形式にしたい。

FORMによる入力ページを作成しているのですが、日付入力の欄に「yyyymmdd」の形式で入力したものをフォーカスが移動した時点で、自動的に「yyyy/mm/dd」の表示形式に変更して表示し、なおかつフォームデータを送信したした時のデータは「yyyymmdd」の形式で送信したいと思っています。(※データベース上はyyyymmddの為)
同様のスクリプトを探してみたのですが、なかなか見つからず困っています。
Javascriptではなく、他の方法でも可能な方法があればそちらでもかまいません。
よろしくお願いいたします。

Aベストアンサー

onFucusとonBlurで整形するといいのでは?
もちろん応用で送信するときにyyyymmddにすることは
可能ですが、そもそも「データベース上はyyyymmddの為」
ということはなんのインジェクションもなしにデータ
ベースに挿入しようとしていますので、これは問題外。
破壊的なデータを送られてきたらどうするつもりでしょう?

送る側でやってもいいですが、送られてきた側がサーバー上
のプログラムでデータの整合性をみてスラッシュを
はずす方が効率的だと思います。

ただ普通はデータベースならDATE型で管理する物なので
この手の作業は発生しませんが・・・。

<script type="text/javascript">
function dateFormat(obj,flg){
var str0=obj.value
if(flg){
if(str0==""){
return
}else if(str0.match(/[0-9]{8}/)){
str1=str0.substring(0,4)+"/"+str0.substring(4,6)+"/"+str0.substring(6,8)
obj.value=str1
}else{
alert("8桁の数字を入力してください")
obj.value="";
}
}else{
str1=str0.split("/").join("");
obj.value=str1
}
}
</script>
<form>
<input type="text" size="15" onBlur="dateFormat(this,true)" onFocus="dateFormat(this,false)">
</form>

onFucusとonBlurで整形するといいのでは?
もちろん応用で送信するときにyyyymmddにすることは
可能ですが、そもそも「データベース上はyyyymmddの為」
ということはなんのインジェクションもなしにデータ
ベースに挿入しようとしていますので、これは問題外。
破壊的なデータを送られてきたらどうするつもりでしょう?

送る側でやってもいいですが、送られてきた側がサーバー上
のプログラムでデータの整合性をみてスラッシュを
はずす方が効率的だと思います。

ただ普通はデータベースならDATE型で...続きを読む

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

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

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

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


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

Aベストアンサー

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

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

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

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

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

Qリクエストに応じたselectedの初期値設定方法

リクエストに応じたOPTIONをselectedの初期値にする方法を教えて下さい。

java servletからjspを表示する際に、
setAttributeした値に応じてプルダウンの初期値に設定するにはどうしたら良いですか?

以下の様にDetail.jspに移動する前に、NOをセットしています。
普通に実行したら、YESで表示されてしまいます。
jsp側で何かを追記すれば良いと思うのですが、全然わかりません。。。

例)
[[[[[ShowDetail.java]]]]]
request.setAttribute("JAPAN", "NO");
request.getRequestDispatcher("/Detail.jsp")
.forward(request, response);

[[[[Detail.jsp]]]]
<form name="Japan">
<table border="1">
<tr>
<th>Japan</th>
<td>
<select name="Japan" id="Japan" >
<option value="YES">YES</option>
<option value="NO">NO</option>
<option value="KNOW">DON'T KNOW</option>
</select>
</td>
</tr>
</table>
</form>

リクエストに応じたOPTIONをselectedの初期値にする方法を教えて下さい。

java servletからjspを表示する際に、
setAttributeした値に応じてプルダウンの初期値に設定するにはどうしたら良いですか?

以下の様にDetail.jspに移動する前に、NOをセットしています。
普通に実行したら、YESで表示されてしまいます。
jsp側で何かを追記すれば良いと思うのですが、全然わかりません。。。

例)
[[[[[ShowDetail.java]]]]]
request.setAttribute("JAPAN", "NO");
request.getRequestDispatcher("/Detail.jsp")
.f...続きを読む

Aベストアンサー

こんにちは。

>普通に実行したら、YESで表示されてしまいます。
>jsp側で何かを追記すれば良いと思うのですが、全然わかりません。。。

あと、カテゴリがJavaScriptではなくJavaですね。

順に考えてみませんか。初期値を設定するには何が必要でしょうか。
今は何もしていないから一番上のYESが表示されています。
<option value="NO" selected="selected">とする必要がありますよね。
そうしたらそれを出力するようにJSPを記述すればいいわけです。

フレームワークを何も利用していなければ以下のようになると思います。

<%
// 例だとjapanにNOが入っている
String japan = (String)request.getAttribute ( "JAPAN" );
%>

<select>
<option value="YES"<%= "YES".equals(japan) ? " selected=\"selected\"" : ""; %>>YES</option>
<option value="NO"<%= "NO".equals(japan) ? " selected=\"selected\"" : ""; %>>NO</option>
<option value="KNOW"<%= "KNOW".equals(japan) ? " selected=\"selected\"" : ""; %>>KNOW</option>
</select>

各optionでどの文字列が入っているかによってselected="selected"を出力すれば良いです。

<%= "YES".equals(japan) ? " selected=\"selected\"" : ""; %>

上の記述は

if ( "YES".equals(japan) ) {
out.write ( " selected=\"selected\"");
} else {
out.write ( "" );
}
と同義です。
ようするにjapanにYESが入ってきたらselected="selected"を出力することにより初期選択項目とする。
NOが入ってくれば"YES".equals(japan)には該当しないので無出力、次の"NO".equals(japan)で該当するのでNOの<option>が初期値となります。

こんにちは。

>普通に実行したら、YESで表示されてしまいます。
>jsp側で何かを追記すれば良いと思うのですが、全然わかりません。。。

あと、カテゴリがJavaScriptではなくJavaですね。

順に考えてみませんか。初期値を設定するには何が必要でしょうか。
今は何もしていないから一番上のYESが表示されています。
<option value="NO" selected="selected">とする必要がありますよね。
そうしたらそれを出力するようにJSPを記述すればいいわけです。

フレームワークを何も利用していなければ以下のようになると...続きを読む

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Qjavascriptで取得した値をテキストボックスに・・・

IE5.5です。
javascriptで取得した値をテキストボックスに格納したいのですが、
うまくいきません。

<SCRIPT language="javascript">
var varVal=true
</script>

<form>
document.write("<input type='hidden' name='myVal' vaue="+varVal+">");
</form>

javascriptが初心者でよくわからないのですが、
例えば
<input type="hidden" name="myVal" value=varValに格納された値>
といった書き方もできるのでしょうか?
よろしくご教授願います。

Aベストアンサー

document.writeもJavaScriptのメソッドなので、Scriptタグで囲んでください。

<form>
<SCRIPT language="javascript">
document.write("<input type='hidden' name='myVal' vaue="+varVal+">");
</script>
</form>

多分これで上手くいくかと…。
(HTMLはよくしらないため、type='hidden'の意味はよくわからなかったので…手元に辞書もないし…
type='text'で確かめてみました→NN4.5)

あとひとつ気になった点。
var varVal=true
ですが、varは関数の中だけで使う変数を宣言するときに使います。
もしこの代入を何かの関数の中で書いていたら、document.writeのvarValとは違う変数に値を入れていることになります。
varVal=true にしてみて下さい。

ではがんばって下さい。

document.writeもJavaScriptのメソッドなので、Scriptタグで囲んでください。

<form>
<SCRIPT language="javascript">
document.write("<input type='hidden' name='myVal' vaue="+varVal+">");
</script>
</form>

多分これで上手くいくかと…。
(HTMLはよくしらないため、type='hidden'の意味はよくわからなかったので…手元に辞書もないし…
type='text'で確かめてみました→NN4.5)

あとひとつ気になった点。
var varVal=true
ですが、varは関数の中だけで使う...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qinputタグ内にあるid属性の意味?

よろしくお願いします。
inputタグ内にあるid属性の意味を ふと、「なんだろう?」と思いました。id属性の意味をど忘れしているのかもしれませんが、
質問させていただきます。具体的には、

<input name="loginid" type="text" value="{{$loginid}}" id="loginid" maxlength="30"> 

にあります、 id="loginid" の意味です。
そもそもid属性はスタイルシートなどで使用するケースは多いと思うのですが、現在PHPの学習中でして、上記のid属性を疑問に思いました。
ちなみにPHPは書籍にて学習中です。
書籍内には、このid属性を使用する意味までかかれていなく・・・
つまり、基本的なことなので、補足の記述がないのだと思います。
お手数をおかけしますが、
id属性の使用目的と、今一度、id属性の意味をご教授下さいませ。

Aベストアンサー

PHPで使うことはありませんが、
テンプレートエンジンの種類によっては(たとえばXSLTとか)、データの識別に使うと思います。

PHPにはHTMLの説明はほとんど無いでしょうね。
数学の微分積分の参考書にかけ算の計算の仕方や方程式を説明してないのと同じだと思います。
HTMLはHTMLとして勉強する方がいいと思います。

HTMLでid属性が使えるのは以下の3種類だけで、
それ以外はCSSかJavaScriptで使うだけだと思います。

・<a href="#hash">のジャンプ先に指定
・<label for="element-ID">の参照先に指定
・<object id="obj-ID">としてデータバインド

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#adef-id

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/links.html#edef-A
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#edef-LABEL

<p><a href="replyform">回答フォームへスクロール</a></p>
<div id="replyform">
<h3>回答フォーム</h3>
<form>
<fieldset><legend>回答の種類</legend>
<label for="advice"><input type="radio" name="source" id="advice" value="1">アドバイス</label>
<label for="reply"><input type="radio" name="source" id="reply" value="2">回答</label>
<label for="complement"><input type="radio" name="source" id="complement" value="3">補足要求</label>
</fieldset>
</form>
</div>

データバインドをサポートしているのはIEだけだと思います。
別の質問に出てきた参考サイトですが、このページが非常に詳しく、わかりやすいと思います。
http://www.makoto3.net/document/databind/databind_all.html

参考URL:http://www.tohoho-web.com/html/index.htm

PHPで使うことはありませんが、
テンプレートエンジンの種類によっては(たとえばXSLTとか)、データの識別に使うと思います。

PHPにはHTMLの説明はほとんど無いでしょうね。
数学の微分積分の参考書にかけ算の計算の仕方や方程式を説明してないのと同じだと思います。
HTMLはHTMLとして勉強する方がいいと思います。

HTMLでid属性が使えるのは以下の3種類だけで、
それ以外はCSSかJavaScriptで使うだけだと思います。

・<a href="#hash">のジャンプ先に指定
・<label for="element-ID">の参照先に...続きを読む

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ(改行タグ<br>の半分以)間隔を空けたいのですが、どうすれば良いのでしょうか?

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

Qjavascriptでセレクトボックスの"selected"を動的につ

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

よろしくお願いします。

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...続きを読む

Aベストアンサー

こんな感じで・・・

<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>

こんな感じで・・・

<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'>
<opt...続きを読む


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

人気Q&Aランキング

おすすめ情報