- 締切済み
JavaScriptお知恵を貸してください
JavaScriptで以下のHTMLの記述で例えばコンボボックスのCさんを選択して"push"ボタンをおして担当者Aの表示と入れ替わりをしたいのですがなぜか２番目の値が表示されていしまいます。ちょっと原因がわからいのです。 ですがセレクトボックスを開くと順序が最初にCさん次に担当者Bさんとなっているのです。値はちゃんと入れ替わっているのですが表示の方が担当者Bが表示されています。 本来ソースを記載すればいいのですがちょっといそいでいるのと出先というのもありまして以下のHTML程度しか かけませんでした。返事の方は遅れてしまうのですが ご教授おねがいします。 <html> <head> <title></title> <script type="text/javascript"> <!-- //--> </script> <body> <form name="fm"> <table align="center"> <tr><td> <input type="button" name="botan" onClick="push()" value="push"> <select name="test" size="3"> <option value="10">Aさん</option> <option value="20">Bさん</option> <option value="30">Cさん</option> <option value="40">Dさん</option> <option value="50">Eさん</option> </select> <select name="test" size="1"> <option value="1">担当者A</option> <option value="2">担当者B</option> </select> </td></tr> </body> </html>
- auto_man
- お礼率56% (41/72)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- torakiyojp
- ベストアンサー率58% (25/43)
optionsのインデックスは0からはじまります。
</table>ぬけてますよー。
関連するQ&A
- JavaScriptのSELECTの値について
JavaScriptについて、質問させてください。 html1からhtml2にSELECTで選択した値を渡すプログラムを作成しています。 下はそのソースです。 <html> <head></head> <body> <form method="POST" action="html2" onSubmit="入力チェック"> <table> <tr> <td>項目A-1</td> <td>項目A-2</td> <td> <select name="selname1"> <option value="0">0</option> <option value="1,11,111">1</option> <option value="2,22,222">2</option> </select> </td> </tr> <tr> <td>項目B-1</td> <td>項目B-2</td> <td> <select name="selname2"> <option value="0">0</option> <option value="3,33,333">3</option> <option value="4,44,444">4</option> </select> </td> </tr> </table> </form> </body> </html> 項目は全部で１０ほどあるので、途中省略しています。 SELECTで0以外が選ばれていた場合に、それに関連する項目情報と optionのvalueをhtml2に送信させて、一覧表のように表示させたいと思います。 JavaScriptのDOMやループ文を使うようですが、 私は専門外なので、どのような処理を組めばよいかわかりません。 どなたか、わかる方ご教示願います。
- 締切済み
- JavaScript
- JavaScriptの読み込み順
下記コードを実行すると、プルダウンメニューに値が入る前にボタンがクリックされてしまいます。 どのようなコードを書けば正常に動作するのでしょうか。 ■html内 <html> <head> <title>SCT</title> <script type="text/javascript"> onload = function() { var d = new Date() ; d.setTime((new Date).getTime()) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getFullYear()-1 ; document.getElementById('year').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getMonth()+1 ; document.getElementById('month').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getDate() ; document.getElementById('day').appendChild(newOption) ; } </script> <script type="text/javascript" language="JavaScript" src="./file.js"> </script> </head> <form NAME="Myfm" method="post" action="☆☆URL☆☆"> <body onLoad="yobi()"> <table border="0"> <tr> <td> <select name="startyear" id="year"> </select> </td> <td>年</td> <td> <select name="startmonth" id="month"> </select> </td> <td>月</td> <td> <select name="startday" id="day"> </select> </td> <td>日</td> </tr> <tr> <td> <select name="endyear"> <option value=201>2011 </select> </td> <td>年</td> <td> <select name="endmonth"> <option value=8>8 </select> </td> <td>月</td> <td> <select name="endday"> <option value=1>1 </select> </td> <td>日</td> </tr> <tr> <td><input type="submit" value="集計" NAME="mybut"> </td> </tr> </table> </body> </form> </html> ■file.js内 function yobi(){ document.Myfm.submit(); }
- ベストアンサー
- JavaScript
- セレクトボックスを使ったJavaScriptでの計算方法
セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。 全部足し算で計算します。 どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptから自ページリンクへ飛ばす方法？
行数の多い一覧で任意の行にスクロールするのが面倒で、 各行のキーになるような値の入ったドロップダウンリスト(以下DL)を設け、 それを選択して該当行を先頭に表示できないか考えています。 ●画面イメージ [A |▼] ←DL |A|データA1| |A|データA2| |B|データB1| : |Z|データZn| DLには"A"～"Z"までが格納されていて、 例えば"Y"の選択でYの行を先頭に表示できればと思います。 そようなDLと、飛び先アンカー<A>を適宜埋め込んだhtmlを作成しました。 DL選択時のonchangeのJavaScriptで選択値に該当する<A>に飛ばす、 なんてできますでしょうか。 そもそもこんな方法はムリかもと思いつつ、お知恵があればと思い質問いたしました。 どうか宜しくお願い致します。 ●html <html> <head> <SCRIPT language="Javascript"> <!-- function onChangeKeyList() { var v = document.thisForm.keyList.value; ※ vにDLで選択した値を取り出す。 これを使って<a name="..."/>に何とか飛べないか？？？ return false; } --> </SCRIPT> </head> <body> <form> <select name="keyList" onchange="onChangeKeyList();"> <option value="A">A</option> : <option value="Z">Z</option> </select> <table> <A name="A" /> ←アンカー <tr> <td>A</td><td>データA1</td> </tr> <tr> <td>A</td><td>データA2</td> </tr> <A name="B" /> ←アンカー <tr> <td>B</td><td>データB1</td> </tr> : </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- javascriptがIEで機能しない
ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択１"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままです どこを修正してやればいいでしょうか？ ぜひ御指南ください。
- ベストアンサー
- JavaScript
- プルダウンの値とJavaScript
下記のようなソースでHTMLのID、パスワードを入力しログを閲覧する画面を作成しました。 プルダウンで今月のログか先月のログを選択するようにしたいと思いますが、 value値の所にJavaScriptの値を入力したいと思っていますが上手くいきません。 具体的には、<OPTION value="1">の1の代わりにdlogの値を<OPTION value="2">の2の 代わりにllogの値を入力したいと思っています。 宜しくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <SCRIPT Language="JavaScript"> <!-- myDate = new Date(); myYear =1900+(myDate.getYear()%1900); dYear =(myDate.getYear() % 100); myMonth =myDate.getMonth() + 1; lastMonth =myDate.getMonth(); if (myMonth<10){ dtMonth=("0"+(myDate.getMonth()+1)); } else {dtMonth =myMonth; } if (myMonth<10){ dlMonth=("0"+(myDate.getMonth())); } else {dlMonth =(myDate.getMonth()); } dlog =(dYear+""+dtMonth+"_log.txt"); if (myMonth == 1){ llog=(dYear-1+""+"12_log.txt"); } else {llog=(dYear+""+dlMonth+"_log.txt"); } // --> </SCRIPT> </HEAD> <BODY> <P align="center"><FONT size="+2"><B>ログファイル閲覧メニュー</B></FONT></P> <HR width="75%"> <form action="../cgi-bin/mail/mail.cgi" method="post"> <CENTER> <TABLE border="0"> <TBODY> <TR> <TD>User ID:</TD> <TD colspan="2"><INPUT size="24" type="text" name="u_id"></TD> </TR> <TR> <TD>Pass Word:</TD> <TD colspan="2"><INPUT size="24" type="password" name="pass"></TD> </TR> <TR> <TD>表示するログ</TD> <TD><SELECT name="log"> <OPTION value="1"> <SCRIPT Language="JavaScript"> <!-- document.write("今月：",myYear,"年",myMonth,"月"); // --> </SCRIPT> </OPTION> <OPTION value="2"><SCRIPT Language="JavaScript"> <!-- if (myMonth == 1){ document.write("先月：",myYear-1,"年12月"); } else {document.write("先月：",myYear,"年",lastMonth,"月"); } // --> </SCRIPT> </OPTION> </SELECT></TD> <TD><INPUT type="submit" name="submit" value="閲覧"></TD> </TR> </TBODY> </TABLE> </CENTER> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- プルダウンによる表示制御方法
プルダウンの選択内容による表示の切り替えを行いたいです。 例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></td></tr></table> すみませんが、よろしくお願い致します。
- ベストアンサー
- HTML
- javascriptによる計算
テキストボックス「a1～6」の値とテキストボックス「b1～6」に入力された値を足し算してテキストボックス「ｃ1～6」（例…c[i] = a[i] + b[i]）を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。 以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "＋"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>
- ベストアンサー
- JavaScript
- javascript 計算フォーム
見積フォームを作っているのですがjavascript に精通してないので詳しい方教えて頂けますか。 下記のようにnew Arrayで値を取得してますが３つ目の項目”メーカー名”はどれを選んでも金額は同じなので簡単に記述出来ないでしょうか？ 合計金額取得後ＣＧＩに送信したいので項目名は必要です。 いろいろ検索してみましたが私のスキルでは解決できないのでよろしくお願いします。 ちなみにjavascriptの 計算フォームは部品の共存（セレクトメニューとラジオボタンなど）は出来ませんよね。 ======================================== <html> <head> </head> <script language="javascript"> <!-- n_table1 = new Array(30000,20000,18000,9000); n_table2 = new Array(8000,14800,6980); n_table3 = new Array(3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000); function keisan(obj) { var outStr=""; var total=0; total = total + n_table1[document.form1.koumoku1.selectedIndex]; total = total + n_table2[document.form1.koumoku2.selectedIndex]; total = total + n_table3[document.form1.koumoku3.selectedIndex]; outStr = "合計 : ￥" + total; document.form2.outbox.value=outStr; } // --> </script> <body> <center> <br> <form name="form1" METHOD="POST"> <table cellspacing="0" cellpadding="8" border="1" bordercolor="#FFA828"> <tr> <td>商品 Ａ</td> <td> <select name="koumoku1"> <option>Pentium <option>Celeron <option>Athlon <option>Duron </select> </td> </tr> <tr> <td>商品 Ｂ</td> <td> <select name="koumoku2"> <option>F2MX200 <option>LE Ultra <option>Kyro </select> </td> </tr> <tr> <td>メーカー名</td> <td> <select name="koumoku3"> <option>Ａ社 <option>Ｂ社 <option>Ｃ社 <option>Ｄ社 <option>Ｅ社 <option>Ｆ社 <option>Ｇ社 <option>Ｈ社 <option>Ｉ社 <option>Ｊ社 <option>Ｋ社 <option>Ｌ社 </select> </td> </tr> </table> <p> <input type="button" value="計算する" onClick="keisan(this.form)"> </form> <p><br> <form name="form2"> <TEXTAREA NAME="outbox" rows=1 cols=36 wrap="soft"> 計算結果表示 </textarea> </form> </center> </body> </html> ========================================
- ベストアンサー
- JavaScript
- JavaScriptの入れ子
久しぶりの、教えて gooです。 宜しくお願いします。 HTMLとJavascriptで動くホームページを、メモ帳で記述しています。 構造は、 1)HTML、BODY、FORM内のselectで、条件1と条件2を取得 Javascriptで、入力チェックすると同時に、 読み込むデータベース jsファイルです を動的に決めて、変数ａに格納します。 また、条件3を、変数ｂに格納します。 2)次に、外部に置いているjsファイルを、Javascriptで読み込みます。 3)そして、Javascriptで、条件3に一致するレコードでテーブルを生成して innerhtmlで書き出します。 部品1)単体、部品3)単体は、動作チェックが済んでいます。 ですが、部品1)から、部品3)に、変数ａ、ｂを引き渡せていないようで 検索条件は指定出来るのに、読み込み、書き出しが実行できません。 どのように、記述を改めれば動作するのか、教えて下さい。 宜しくお願いします。 以下、ソースを抜粋します。 001 <HTML> 002 <HEAD> 003 <SCRIPT type="text/javascript"> 004 function Select(){ 005 var frm = document.forms["frm1"]; 006 007 var idx = frm.elements["select1"].selectedIndex; 008 var idy = frm.elements["select2"].selectedIndex; 009 var idz = frm.elements["select3"].selectedIndex; 010 011 if(idx!="" && idy!="" && idz!="") { 012 /* 読み込みDB */ 012 dbname1 = frm.elements["select1"].options[idx].value; 013 dbname2 = frm.elements["select2"].options[idy].value; 014 /* DB抽出条件 */ 015 jouken1 = frm.elements["select3"].options[idz].value; 016 017 /* DB名称生成 */ 018 DBname = "./DB_" 019 DBname += dbname1 020 DBname += "_" 021 DBname += dbname2 022 DBname += ".js" 023 } 024 else{ 025 alert("未入力項目があります"); 026 } 027 } 028 </script> 029 030 031 <script type="text/javascript" src="DBname"></script> 032 033 034 <script type="text/javascript"> 035 var i; 036 var r; 037 var arrayLength=exDB.length; 038 039 function dataSearch(jouken1) { 040 var flag=false; 041 var msg; 042 var data=new Array(); 043 044 msg = "<TABLE BORDER='0'>"; 045 msg = msg+"<TR>" 046 msg = msg+"<TH width='60'>名前</TH> 047 msg = msg+"<TH width='120'>都道府県</TH> 048 msg = msg+"<TH width='120'>電話番号</TH>"; 049 msg = msg+"</TR>"; 050 051 for(i=0; i<arrayLength; i++) { 052 data=funeDB[i].split(" "); 053 if(data[0]==jouken1) { 054 flag = true; 055 msg = msg+"<TR>"; 056 msg = msg+"<TD class='light-right' width='60' >"+data[0]+"</TD>"; 057 msg = msg+"<TD class='light-right' width='120'>"+data[1]+"</TD>"; 058 msg = msg+"<TD class='light-center' width='120'>"+data[2]+"</TD>"; 059 msg = msg+"</TR>"; 060 } 061 if(flag==false) { 062 msg = msg+"<tr><td>該当する文字列はありません</td></tr>"; 063 } 064 msg = msg+"</TABLE>"; 065 document.getElementById("displayPane").innerHTML=msg; 066 } 067 </SCRIPT> 068 069 070 </HEAD> 071 072 <BODY> 073 074 <FORM name="form" action="#"> 075 <SELECT name="select1"> 076 <option value="">▼選択してください</option> 077 中略 078 </SELECT> 079 080 <SELECT name="select2"> 081 <option value="">▼選択してください</option> 082 中略 083 </SELECT> 084 085 <SELECT name="jouken1"> 086 <option value="">▼選択してください</option> 087 中略 088 </SELECT> 089 090 <INPUT type="button" value="検索する" onclick="Select()" /> 091 092 </FORM> 093 094 <DIV id="displayPane"></DIV> 095 096 </BODY> 097 098 </HTML>
- 締切済み
- JavaScript
