- ベストアンサー
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）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (9)
- fujillin
- ベストアンサー率61% (1594/2576)
さらにミスった。<input>はブロック要素で囲んでくれ！ innerHTMLだと<td>の中に、他のタグは使えない。
お礼
何度もご回答頂きありがとう御座います。更にコードまで提示していただき 誠に感謝したします。 期待通りそのままの動作が出来ました。 正直、コードの理解は出来ていませんがこれから少しずつ勉強もして参ります。 この度は誠に勝手なお願いにお付き合いいただきましてありがとうございました。
- 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月まで順番にあるとは限りません。動的に追加して います。 この為、テーブルから直接値を取得し、セレクトボックス内を検索？して から、選択しなければいけないのかなと考えています。 お手数をお掛けいたしましたが、引き続き宜しくお願いいたします。
お礼
fujillin様。昨晩からお付き合い頂き誠にありがとうございました。 コードの方は_pipi_様からのご回答で解決いたしました。 しかし、fujillin様のご回答も大変参考になり感謝いたします。 実は、PHPの勉強中にjavascriptの問題にぶち当たり、中途半端なまま取り組んでいるため、ちぐはぐな状態だと思います。 ご提示いただいたソースを参考に今後も勉強してまいります。 ありがとうございました。