- ベストアンサー
HTMLのテーブルの値と同じ値をセレクトボックスで選択したい
テーブルには1月～12月までの値があり、セレクトボックスにも1月～12月の項目があります。 この様な場合で、テーブルの4月をクリックした場合、セレクトボックスの4月を選択状態にしたいです。 テーブルの値を取得し、テキストボックスに表示する事は出来ましたが、セレクトボックスの場合はさっぱり分かりません。宜しければご教授下さい。 下記は別のサイト様を参考にテスト中の物ですが、テキストボックスには可能ですが、セレクトボックスでは表示されません。 <SCRIPT TYPE="text/javascript"> <!-- function getCell(obj){ document.getElementById("text1").value = document.getElementById("td"+obj + "a").textContent; } // --> </SCRIPT> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr id="tr0" onclick="getCell('1')"> <td id="td1a">1月</td> </tr> <tr id="tr0" onclick="getCell('2')"> <td id="td2a">2月</td> </tr> <tr id="tr0" onclick="getCell('３')"> <td id="td3a">2月</td> </tr> 省略 </table> <select id="text1"> <option>1月</option> <option>2月</option> <option>3月</optio> 省略 </select> 初心者丸出しで申し訳有りませんが宜しくお願いします。
- taka0889
- お礼率20% (2/10)
- JavaScript
- 回答数10
- ありがとう数7
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>set select?</title> <table border="1" id="tb0"> <tr><td>1月</td><td>100円</td></tr> <tr><td>2月</td><td>200円</td></tr> <tr><td>3月</td><td>300円</td></tr> </table> <select id="text1"> <option>1月</option> <option>2月</option> <option>3月</option> </select> <input type="text" id="text2"> <script type="text/javascript"> //@cc_on //全角空白は、タブまたは半角空白に変換のこと document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function (evt) { var e = evt./*@if (1) srcElement @else@*/ target /*@end@*/; var t = 'tb0'; var text; var c; if (!(e.tagName == 'TD' || e.tagName == 'TH')) return; if (!getParentById(e, t)) return; c = e.parentNode.childNodes; setSelectByText('text1', getText(c[0])); document.getElementById('text2').value = getText(c[1]); },false ); function setSelectByText (eId, val) { var s = document.getElementById(eId).options; var cnt = 0; var f = false; var o; while (o = s[cnt++]) if (o.text == val) o.selected = f = true; return f; } function getParentById (e, eId){ while (e) if (e.id == eId) return e; else e = e.parentNode; return null; } function getText (e) { return e./*@if (1) innerText @else@*/ textContent /*@end@*/; } </script>
その他の回答 (9)
- fujillin
- ベストアンサー率61% (1594/2576)
No5です ＞テーブルの行（<tr>）を選択した場合に～ それなら、テーブル全体をヒットさせて（元の通り）で、行の先頭のtdを取得すればいいのでは？ No6と同様の操作で可能です。 つぎはぎにさらにつぎ当てだけど… function test(evt){ var elm = evt.srcElement || evt.target; if (elm.nodeName=='TD') { elm = elm.parentNode.firstChild; alert(elm.innerHTML); var txt = elm.innerHTML; var elm = document.getElementById('text1'); for (var i=0; i<elm.options.length; i++){ if (elm.options[i].text==txt) {elm.selectedIndex = i; break;} } } } ＞100円をテキストボックスに表示→これは分かります がわかるなら、わかると思いますが・・・？ No9様がおっしゃっている、<td>の中に他のタグがある場合の処理は行っていませんので、そのような場合は、親要素を遡って、TRの最初のTD要素を取得するようにしてください。
さらにミスった。<input>はブロック要素で囲んでくれ！ innerHTMLだと<td>の中に、他のタグは使えない。
お礼
何度もご回答頂きありがとう御座います。更にコードまで提示していただき 誠に感謝したします。 期待通りそのままの動作が出来ました。 正直、コードの理解は出来ていませんがこれから少しずつ勉強もして参ります。 この度は誠に勝手なお願いにお付き合いいただきましてありがとうございました。
if (!(e.tagName == 'TD' || e.tagName == 'TH')) return; いらねぇがも。
- fujillin
- ベストアンサー率61% (1594/2576)
No5です。 ＞1列目をセレクトボックスに2列目をテキストボックスに表示する予定です。 No5にも書きましたが、該当するものがない場合は何もしないので、とりあえず、今のままでも動作すると思いますが・・？ まぁ、2列目、3列目・・・に「2月」などの表記があれば、それにも反応してしまうことになりますが… とは言っても、正しい（予定通りの）動作ではないのもしゃくなので、1列目だったらという判断を追加しました。 （考え方を変えて作るのも面倒なので、No5につぎはぎの形で追加） function testの部分だけ入れ替えてください。 function test(evt){ var elm = evt.srcElement || evt.target; if ((elm.nodeName=='TD') && (!elm.previousSibling)){ var txt = elm.innerHTML; var elm = document.getElementById('text1'); for (var i=0; i<elm.options.length; i++){ if (elm.options[i].text==txt) {elm.selectedIndex = i; break;} } } }
補足
何度もご回答いただきありがとうございます。 説明がへたで本当にすみません。 私が望む動作は、テーブルの項目（<td>）毎ではなく、テーブルの行（<tr>）を選択した場合に各項目をセレクトボックスで選択させたいのです。 -------------- 1月 100円 -------------- 2月 200円 -------------- 上記のテーブルで1行目(<tr>)を選択した場合 セレクトボックスに1月を選択。→分からない部分 100円をテキストボックスに表示→これは分かります 何度も質問しまして大変申し訳ありません。 お手数でなければ宜しくお願いします。
- fujillin
- ベストアンサー率61% (1594/2576)
document.getElementById("text1").value =○○ だとセレクト状態にはならないみたい。 ＞テーブルの値は、1月～12月まで順番にあるとは限りません。 ＞動的に追加しています。 optionsを検索してあったら表示、無ければなにもしない、でいいのかな？ あるいは、無いときは値を追加するのでしょうか？ とりあえず前者のケース。（追加するのはわかっているみたいなので、必要ならアレンジしてください。） table内の全てがクリックの対象なのか、一部だけなのかわかりませんでしたが、これもとりあえず、全部が対象と仮定してテーブルをクリックしたらイベント発生とした場合の例。 <html> <head> <SCRIPT TYPE="text/javascript"> <!-- window.onload = function(){ var t=document.getElementById('table1'); if(window.addEventListener){ t.addEventListener('click', test, false); }else if(window.attachEvent){ t.attachEvent('onclick', test); } } function test(evt){ var elm = evt.srcElement || evt.target; if (elm.nodeName=='TD'){ var txt = elm.innerHTML; var elm = document.getElementById('text1'); for (var i=0; i<elm.options.length; i++){ if (elm.options[i].text==txt) {elm.selectedIndex=i; break;} } } } // --> </SCRIPT> </head> <body> <table id="table1" border="1" cellpadding="0" cellspacing="0"> <tr><td>1月</td></tr> <tr><td>2月</td></tr> <tr><td>3月</td></tr> <tr><td>4月</td></tr> <tr><td>5月</td></tr> </table> <select id="text1"> <option>1月</option> <option>2月</option> <option>3月</option> </select> </body> </html>
補足
ご回答ありがとうございます。 ほぼ期待どおりの動作をしましたが、動作を<tr>をクリック した場合にしたいです。（実際にはその他いくつかの項目があります） id="tb0"を<tr>にしてみましたがだめでした。 動作のタイミングを<tr>をクリックしたタイミングに出来ませんでしょうか？ 実際には下記の様に複数の項目があり、1列目をセレクトボックスに2列目 をテキストボックスに表示する予定です。 <tr><td>1月</td><td>100円</td></tr> <tr><td>2月</td><td>500円</td></tr> <tr><td>3月</td><td>600円</td></tr> 度々すみませんが宜しくお願いします
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>set select?</title> <table border="1" id="tb0"> <tr><td>1月</td></tr> <tr><td>2月</td></tr> <tr><td>3月</td></tr> </table> <select id="text1"> <option>1月</option> <option>2月</option> <option>3月</option> </select> <script type="text/javascript"> //@cc_on document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function (evt) { var e = evt./*@if (1) srcElement @else@*/ target /*@end@*/; var t = 'tb0'; var text; if (!(e.tagName == 'TD' || e.tagName == 'TH')) return; if (!getParentById(e, t)) return; text = e./*@if (1) innerText @else@*/ textContent /*@end@*/; setSelectByText('text1', text); }, false); function setSelectByText(eId, val) { var s = document.getElementById(eId).options; var cnt = 0; var f = false; var o; while (o = s[cnt++]) if (o.text == val) o.selected = f = true; return f; } function getParentById(e, eId){ while (e) if (e.id == eId) return e; else e = e.parentNode; return null; } </script>
補足
ご回答ありがとうございます。 ほぼ期待どおりの動作をしましたが、動作を<tr>をクリック した場合にしたいです。（実際にはその他いくつかの項目があります） id="tb0"を<tr>にしてみましたがだめでした。 動作のタイミングを<tr>をクリックしたタイミングに出来ませんでしょうか？
- k_mamas
- ベストアンサー率36% (16/44)
optionのvaluesを渡してあげる方法でどうでしょう？ 参考URLに似たものがあったので、載せておきますね。
補足
参考ＵＲＬありがとうございます。 リンク先を確認しましたが、勉強不足のため期待した動作が出来ませんでした。ありがとうございます
- k_mamas
- ベストアンサー率36% (16/44)
document.getElementById("text1").value = document.getElementById("td"+obj + "a").textContent; この部分を document.getElementById("text1").options[(obj-1)].selected = true; でどうでしょう？ objを-1をしてるのは、optionsは0から始まるので、 １月の場合は、0だからです。
補足
ご回答ありがとうございます。 申し訳有りません。質問の仕方が悪かったです。 テーブルの値は、1月～12月まで順番にあるとは限りません。動的に追加して います。 この為、テーブルから直接値を取得し、セレクトボックス内を検索？して から、選択しなければいけないのかなと考えています。 お手数をお掛けいたしましたが、引き続き宜しくお願いいたします。
- OKwebb
- ベストアンサー率44% (92/208)
提示ソースでもうまく動く気がするが・・・。 こんなのはどうですか function getCell(obj){ document.getElementById("text1").selectedIndex = obj-1; }
補足
ご回答ありがとうございます。 申し訳有りません。質問の仕方が悪かったです。 テーブルの値は、1月～12月まで順番にあるとは限りません。動的に追加して います。 この為、テーブルから直接値を取得し、セレクトボックス内を検索？して から、選択しなければいけないのかなと考えています。 お手数をお掛けいたしましたが、引き続き宜しくお願いいたします。
関連するQ&A
- セレクトボックスでそれ以降の表示を切り替えたい
http://5am.jp/javascript/form_change_javascript/ の「サンプルソース（セレクトボックス）」のような入力フォームを作成中です。セレクトボックスでの選択によって、その下に複数行表示させたいので、サンプルソースのgetElementByIdのところをgetElementsByClassNameにして実装してみたのですが動きませんでした…。 以下が自分が書いたコードになります。どこがおかしいのでしょうか？ （インデントがうまくできていなくて申し訳ないです。） 回答よろしくお願いします。 <script type="text/javascript"> function entryChange2() { if (document.getElementById('changeSelect')) { id = document.getElementById('changeSelect').value; if (id == 'select1') { document.getElementsByClassName('firstBox2').style.display = ""; document.getElementsByClassName('secondBox2').style.display = "none"; } else if (id == 'select2') { document.getElementsByClassName('firstBox2').style.display = "none"; document.getElementsByClassName('secondBox2').style.display = ""; } } } window.onload = requestChange; </script> <form> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th>利用方法</th> <td> <select id="changeSelect" name="hoge" onchange="entryChange2();"> <option value="select1">初めて申し込む</option> <option value="select2">2度目以降の利用</option> </select> </td> </tr> <!-- 表示非表示切り替え --> <tr class="firstBox2"> <th>紹介者</th> <td><input type="text" /> <p>紹介された方のお名前を入力してください。</p></td> </tr> <tr class="firstBox2"> <th>紹介者のメールアドレス</th> <td><input type="text" /> <p>紹介された方のメールアドレスを入力してください。</p></td> </tr> <!-- 表示非表示切り替え --> <tr class="secondBox2"> <th>名前</th> <td><input type="text" /> <p>名前を入力してください。</p></td> </tr> <tr class="secondBox2"> <th>会員番号</th> <td><input type="text" /> <p>会員番号を入力してください。</p></td> </tr> </table> </form>
- ベストアンサー
- 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
- HTMLにてセレクトボックスを作る
よろしくお願いします。 <tr><td class="td_head">あいう<br /></td> <td class="td_odd"><select name="select /" > <option value="#">選択して下さい <option value="【a01】">【あああ】</option> <option value="【a02】">【いいい】</option> <option value="【a03】">【ううう】</option> <option value="【a04】">【えええ】</option></select></td> </tr> とすると、エディターにて◆ 102行: 要素optionはこの位置には置けません。と出てしまいます。何か文法ミスがありますか？ おヒマな時にでもご回答願えればと思います。
- 締切済み
- ホームページ作成ソフト
- セレクトボックスの値から料金を計算したい
お世話になります。 現在、HTML中に下記のソースを記述しセレクトボックスの数量が選択されたときに自動計算をしようとしています。 ------------------------------------------------------------------- <table summary="ご購入内容"> <tr> <th><p>カレンダー</p></th> <td class="price">1,000円（税込）</td> <td class="select"> <input type="hidden" name="field16_name" value="カレンダー" /> <input type="hidden" name="field16_req" value="no" /> <select type="select" id="item1" name="field16_text" accesskey="a" tabindex="1" onchange="keisan();"> <option value="0"> 0部</option> <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> </select></td> </tr> </table> <table summary="小計金額"> <tr> <th><p>小計金額</p></th> <td><input type="text" id="sender-shoukei1" name="field21_text" value="0" accesskey="k" tabindex="6" /> 円（税込）</td> </tr> <tr> <th><p>送料</p></th> <td> <input type="text" id="sender-postage1" name="field22_text" value="0" accesskey="k" tabindex="7" /> 円（税込）</td> </tr> </table> <table summary="合計金額" class="inner-02 m20"> <tr class="gokei"> <th>合計金額</th> <td> <input type="text" id="sender-goukei" name="field29_text" value="0" accesskey="k" tabindex="14" /> 円（税込）</td> </tr> </table> ------------------------------------------------------------------- <script type="text/javascript"> /* <![CDATA[ */ function keisan(){ /* 商品 */ var price1 = document.form.field16_text.options[document.form.field16_text.selectedIndex].value; var field21_text= parseInt(price1)*1470 ; /* 小計 */ document.form.field21_text.value = addFigure(field21_text); /*送料 */ var price1p = 0; if ( price1 < 2 ) { price1p = price1 * 290; } else { price1p = 0; } var field22_text = parseInt(price1p); if ( field21_text > 5000 ) { field22_text = 0; } document.form.field22_text.value = addFigure(field22_text); /* 合計 */ var field29_text = parseInt(field21_text); document.form.field29_text.value = addFigure(field29_text); function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } } /* ]]> */ </script> ------------------------------------------------------------------- しかし、「'document.form.field16_text'はNullまたはオブジェクトではありません」とエラーが出てしまいます。 アンダーバーは利用できないのでしょうか？どこに問題があるのかお教えください。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 選択ボックスで選んだものに応じて値を変更する方法
片方の選択ボックスで選んだものに応じて もう片方の選択ボックスの表示内容を変更したいと思います。 「なす」を選んだら３０円 「きゅうり」を選んだら４０円 「ねぎ」を選んだら５０円 「選んで下さい。」を選んだら０円（初期値） としたいと思うのですが、下記内容をどのように 変更すればよろしいのでしょうか。 教えて下さい。 <table border="0" width="700"> <tr> <td width="50%"> <select name="野菜"> <option value="SENTAKU">選んで下さい。</option> <option value="NASU">なす</option> <option value="KYUURI">きゅうり</option> <option value="NEGI">ねぎ</option> </select> </td> <td> <select name="値段"> <option value="NEDAN">０円</option> </select> </td> </tr> </table>
- ベストアンサー
- HTML
- チェックボックス、セレクトボックスを組み合わせた複雑な計算表を作りたい
下記のような条件を満たす計算表を作りたいのですが、どのように作っていけばいいのか、さっぱり分かりません。 殆ど初心者に近い状態で、このような複雑な計算表を作るのは不可能に近いのは分かっているのですが、是非、ご教授願いたいと思い、質問させて頂きたいです。 <html> <head> <title></title> </head> <body> <form name=all> <table> <tr> <td colspan=2>a</td> <td colspan=7> <input name=AA type=checkbox>AA <input name=BB type=checkbox>BB </td> </tr> <tr> <td colspan=2>b</td> <td colspan=7> <input name=CC type=checkbox>CC <input name=DD type=checkbox>DD </td> </tr> <tr> <td colspan=2>c</td> <td colspan=7><input name=nn type=text></td> </tr> <tr> <td colspan=2>d</td> <td colspan=7> <input name=EE type=checkbox>EE <input name=FF type=checkbox>FF <input name=GG type=checkbox>GG <input name=HH type=checkbox>HH </td> </tr> <tr> <td colspan=2>eA</td> <td colspan=7><input name=PP type=checkbox>PP</td> </tr> <tr> <td rowspan=5>eB</td> <td>e1</td> <td>i1</td> <td colspan=3> <select name=i1> <option>1</option> <option>2</option> </select> </td> <td>I2</td> <td colspan=2> <select name=i2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e2</td> <td>J1</td> <td colspan=3> <select name=j1> <option>1</option> <option>2</option> </select> </td> <td>J2</td> <td colspan=2> <select name=j2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e3</td> <td>K1</td> <td colspan=3> <select name=k1> <option>1</option> <option>2</option> </select> </td> <td>K2</td> <td colspan=2> <select name=k2> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>e4</td> <td colspan=7> <select name=l1> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>f5</td> <td colspan=7> <select name=m1> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td colspan=2>f</td> <td>f1</td> <td colspan=3><input name=oo type=text></td> <td>f2</td> <td colspan=2><input name=pp type=text></td> </tr> </table> <br> <input name=keisan1 type=submit value=計算1> <input name=clear1 type=reset value=クリア1> </form> <br> <table><tr> <td colspan=9> a～dの計<input type=text name=qq>-f1<input type=text name=rr>=ABC<input type=text name=ss> </td> </tr> <tr> <td colspan=9> eA+eBの計<input type=text name=tt>-f2<input type=text name=uu>=DEF<input type=text name=vv> </td> </tr> <tr> <td colspan=9>ABC+DEFの計<input type=text name=ww>×dで選択したときの代入数字=<input type=text name=xx></td> </tr> </table> <br> <input name=kei2 type=submit value=計算2> <input name=clear2 type=reset value=クリア2> </center> </body> </html> 条件として、 ・「a～d」は、必ず入力 ・「e～f」は、該当する場合にのみ ・チェックボックスの行は、どれか1つだけを必ず選択（複数選択した場合、注意を促す） ・セレクトボックスの行は、 該当する場合のみ ・最後に「計算」ボタンを押した時に、未入力の部分（a～d）の注意を促す 計算なのですが、 1．「a」のAAを選択、「b」のCCを選択、「c」に20を入力、「d」のEEを入力したときの場合の計算 その時、「d」のEEには10を代入という形で計算したい。（他のFF=20,GG=30,HH=40） ※「a」のBBを選択した場合は、「d」のEE=15,FF=17,GG=22,HH=27となった場合も 2．上記の条件に加え、「eB」の「e1」は1、「e2」も1を選択、「e4」は2を選択した時の計算 その時、「e1」には「100」を代入、「e2」は「150」を代入、「e4」には「80」を代入で計算したい 3．上記「2」の条件に加え、「f1」に150、「f2」に70と入力した場合、「a～d」の計算合計から「f1」を引き、「e」のAとBの計算合計から「f2」を引く 長くて条件等も分かりづらいかもしれませんが、宜しくお願いします。
- ベストアンサー
- JavaScript
- 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
- 動的なtableの値を取得したい
いつもお世話になります。 見よう見まねでやっている超初心者です。 下記の様なテーブル（phpで読み込んでいますので実際は動的です。） の回答ボタンをクリックすると テーブル下の<INPUT type="text" name="kotae">に ボタンをクリックされた行のｂ列の値を入れたいと思っています。 function kaito()をどのように書いたら取得できるか悩んでいます。 初心者なもので具体的な回答でしたら助かります。 ご教授の程どうぞよろしくお願い致します。 <html> <head> <meta content="text/html; charset=utf-8" /> <script> </script> </head> <body> <table width="100" border="1"> <tr> <th width="30" scope="col">a</th> <th width="30" scope="col">b</th> <th width="40" scope="col">c</th> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td><td>3</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>4</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>5</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> </table> <INPUT type="text" name="kotae" size="12" > </body> </html>
- ベストアンサー
- JavaScript
- 動的なセレクトボックスの生成と削除
CGI（Perl）で、Javascriptを用いWEBアプリケーションを作成しています。 その過程で、追加ボタンを押すとセレクトボックス（５つでひとかたまりです）が増えるJavascriptを作成しています。 しかし、残念ながら削除をする機能をどうしていいか思いつきませんのでお知恵を貸してください。（また、増加ボタンも他にいい方があレバよろしくお願いします。） 今までに作成したのは以下のとおりです。 **********Javascript*********** var copy; function addInput() { copy = document.getElementById('plus') copy.innerHTML="Filter: <select name='condition'> <option value='and'>AND</option> <option value='or'>OR</option> </select> <select onchange='SetSubMenu(value);'> <option value='Werkstoff'>1.Werkstoff</option> <option value='Shiftfaktor'>2.Shiftfaktor </option> <option value='SurfCorr'>3.SurfCorr</option> </select> <select name='condition'> <option value='like'>like</option> <option value='notlike'>not like</option> <option value='equal'>=</option> <option value='<'><</option> <option value='>'>></option> <option value='<='><=</option> <option value='>='>>=</option> </select> <div id ='Werkstoff' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGWERK> <option value='<TMPL_VAR NAME=WERKSTOFF>'><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP></select></div> <div id ='Getriebe' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGETRIEBE> <option value='<TMPL_VAR NAME=GETRIEBE>'><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP></select></div> <input type='button' onclick='addInput()' value='+'> <input type='button' onclick='delInput()' value='-'> <div id='plus'></div>" } </script> **********stylesheet************* <style type="text/css"><!-- .secondpulldown { display: none; } --></style> <table> <tr> <td>Datenbank:</td> <td colspan="5"> <select name="datenbank"> <option value="bank1">DATEN BANK 1</option> </select> </td> </tr> <tr> <td>Filter:</td> <td> <select name="condition"> <option value="and">AND</option><option value="or">OR</option> </select> </td> <td> <select onchange="SetSubMenu(value);"> <option value="Werkstoff">1.Werkstoff</option> <option value="Shiftfaktor">2.Shiftfaktor </option> <option value="SurfCorr">3.SurfCorr</option> </select> </td> <td> <select name="condition"> <option value="like">like</option> <option value="notlike">not like</option> <option value="equal">=</option> <option value="<"><</option> <option value=">">></option> <option value="<="><=</option> <option value=">=">>=</option> </select> </td> <td> <div id ="Werkstoff" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGWERK><option value="<TMPL_VAR NAME=WERKSTOFF>"><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP> </select> </div> <div id ="Getriebe" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGETRIEBE><option value="<TMPL_VAR NAME=GETRIEBE>"><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP> </select> </div> </td> <td> <input type="button" onclick="addInput()" value="+"> <input type="button" onclick="delInput()" value="-"> </td> </tr> <tr> <td colspan='6'><div id="plus"></div></td> </tr> </table> よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトボックスを使用した、フォームのアクティブ・非アクティブの切り替え
セレクトボックス（A）を使用して、（A）の選択結果により（A）以降をアクティブ・非アクティブに切り替えたいのです。 アクティブ・非アクティブの切り替え自体は正常に動くのですが、一度「送信する」をクリックした後、次の画面に移動し、その後「戻る」をクリックorブラウザの戻るで元のページに戻ると、アクティブ化できていたセレクトボックス（C）が全て非アクティブとなってしまっているのです。 原因は何でしょうか？よろしくお願いいたします。 function setTF() { n = document.mail.Data.selectedIndex; flag = eval(document.mail.Data.options[n].value); document.mail["B"].disabled = flag; document.mail["C"].disabled = flag; } ※以下HTML※ <form action="mail.cgi" method="post" name="mail"> <table> <tr> <th>セレクトボックス（A）</th> <td><select name="Data" onchange="setTF()"> <option value="false">アクティブ</option> <option value="true" selected="selected">非アクティブ</option> </select></td> </tr><tr> <th>テキスト（B）</th> <td><input size="4" type="text" name="B" disabled="disabled" /> 才</td> </tr><tr> <th>セレクトボックス（C）</th> <td><select name="C" disabled="disabled"> <option>選択肢1</option> <option>選択肢2</option> </select></td> </tr><tr> <td colspan="2" class="submit"><input type="submit" value="送信する" /><input type="reset" value="リセット" /></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
お礼
fujillin様。昨晩からお付き合い頂き誠にありがとうございました。 コードの方は_pipi_様からのご回答で解決いたしました。 しかし、fujillin様のご回答も大変参考になり感謝いたします。 実は、PHPの勉強中にjavascriptの問題にぶち当たり、中途半端なまま取り組んでいるため、ちぐはぐな状態だと思います。 ご提示いただいたソースを参考に今後も勉強してまいります。 ありがとうございました。