- 締切済み
プルダウンリストとテキストエリアの連動
どう調べてもわからないので教えてください。 HTML上で動作するツールを作成しています。 最終的に、あるテンプレートをテキストエリアに表示させたいと考えています。 そのために、項目をいくつかプルダウンで選択し進んでいくというものです。 プルダウンリストは、選択したリストにより連動し、選択肢が変わるように したいのです。 項目別にプルダウンは5つ、5つ目はない場合もあります。 【手順】 (1)プルダウン（１）選択 ↓ (2)プルダウン（2）選択 ↓ (3)プルダウン（3）選択 ↓ (4)プルダウン（4）選択 ↓ (5)プルダウン（5）選択 ←選択肢がない場合あり ↓ テキストエリアに該当の文言が表示 ちょっと複雑なのですが、よろしくお願いいたします。
- minimoog7291
- お礼率60% (3/5)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLとスタイルシートだけなら、とっても簡単・・preにしてある。textareaでもよいが・・コピーさせるならpreのほうが良いでしょう。ただし、:hoverの親コンテナブロックと接していることが必要です。 [HTML4.01strict] ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。ＳＥＯとしても問題ないでしょう。 ☆タブは＿に置換してありますから戻すこと。原理を示すだけで細かい設定はしてない。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- ol,li{display:block;list-style:none;margin:0;padding:0;} ol li{width:10em;border:solid 1px gray;} ol li ol{display:none;margin-left:5px;} ol li:hover ol{display:block;} ol li:hover ol li ol{display:none;} ol li:hover ol li:hover ol{display:block;} ol li:hover ol li:hover ol li ol{display:none;} ol li:hover ol li:hover ol li:hover ol{display:block;} ol li:hover ol li.answer pre{ ＿position:absolute;top:60px;left:150px; ＿height:400px;width:400px;padding:0.5em 1em; ＿background-color:white;z-index:10; ＿border:ridge 4px gray;＿overflow:auto; } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<ol> ＿＿<li>あ行 ＿＿＿<ol> ＿＿＿＿<li>あ ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li>あい ＿＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿<li class="answer"> ＿＿＿＿＿＿＿＿＿<pre>藍 濃い青</pre> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿</ol> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li>あお ＿＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿<li class="answer"> ＿＿＿＿＿＿＿＿＿<pre>青 Blue</pre> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿</ol> ＿＿＿＿＿＿</li> ＿＿＿＿＿＿<li>あか ＿＿＿＿＿＿＿<ol> ＿＿＿＿＿＿＿＿<li class="answer"> ＿＿＿＿＿＿＿＿＿<pre>赤 red</pre> ＿＿＿＿＿＿＿＿</li> ＿＿＿＿＿＿＿</ol> ＿＿＿＿＿＿</li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li>い</li> ＿＿＿＿<li>う ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li class="answer">うぐいす ＿＿＿＿＿＿＿<pre>鶯色 鶯色（うぐいすいろ）とは灰色がかった緑褐色を言う。 また、抹茶色に近い柔らかな黄緑色を連想する人もいる。 前者はウグイスの羽に忠実に取材した色であり、英語の オリーヴグリーン（olive-green未成熟のオリーブの果実の色） に近いが、後者はウグイスと同じく春先によく見かけられる 野鳥のメジロの羽の色と混同されている。 また江戸時代中期には前者の鶯色がより茶色味がかった鶯茶が 女性の普段着の色として大流行したため、当時「鶯色」といえ ばこちらの色を指す。 Wikipediaより</pre> ＿＿＿＿＿＿</li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li>え ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li class="answer">えんじ ＿＿＿＿＿＿＿<pre>臙脂 臙脂で染めた濃い紅色。黒みを帯びた赤色。</pre> ＿＿＿＿＿＿</li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li>お ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li class="answer">おれんじ ＿＿＿＿＿＿＿<pre>オレンジ Orengee</pre> ＿＿＿＿＿＿</li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</li> ＿</ol> </body> </html>
- ・真 綾・（@Ma-yan_bh1011）
- ベストアンサー率30% (79/257)
「onchange」で検索してみましょう。
お礼
なるほど。ありがとうございます。onchangeの仕組みがちょっとわかりました。