連動プルダウンの結果を表示

質問

http://d.hatena.ne.jp/Mars/20071109
↑こちらのサイトを参考に３つの連動プルダウンを作成したのですが、
この機能にプラスで、最後、
【あなたの選んだものは、⚫️⚫️⚫️です】
のように、結果をウェブ上に表示したいのですが、javascriptが全くダメで、
表示できずに困っています。

ドットインストールなど様々な学習サイトを見ましたが、できませんでした。
すでに変数を持っているので、表示の命令をすればいいとは思うのですが、
わかりませんでした。
表示方法を教えてください。

よろしくお願い致します。

回答No.1

Hanagefactory · ベストアンサー

画面上に表示させるにはHTMLダグを生成（または既存に挿入）する必要があります。

リンク先のスクリプトを利用した場合、で以下が３番目のSELECTなら
<select id="SEL3">
<optgroup label="x1">
<option value="x1-1">x1-1</option>
・・・略
</optgroup>
</select>

表示用のHTMLタグを用意しておいて、
<div id="result_text"></div>

以下のようにスクリプトを実行すれば、テキストを表示できると思います。
var lastSelectTag = document.getElementById("SEL3");
var value_text = lastSelectTag.options[lastSelectTag.selectedIndex].text;
document.getElementById("result_text").innerHTML = "《あなたの選んだものは "+value_text+" です》";

実行させるタイミングは自由ですが、
SEL3にonchangeをつけても動かしてもいいと思います。

お礼

ご回答ありがとうございます。
早速やってみましたが、うまくいきませんでした。
どこがダメなのか教えていただけるとありがたいです。
以下のようにやってみました。

--------------
<script type="text/javascript" src="ConnectedSelect.js"></script>

<form action="#">
<dl>
<dt>カテゴリー</dt>
<dd>
親カテゴリ<select id="SEL1">
<option value="">---</option>
<option value="fruits">果物</option>
<option value="vegetable">野菜</option>
</select>
</dd>
<dt>型番 / 製品名</dt>
<dd>
子カテゴリ<select id="SEL2">
<option value="">---</option>
<optgroup label="fruits">
<option value="apple">りんご</option>
<option value="melon">メロン</option>
</optgroup>
<optgroup label="vegetable">
<option value="tomato">トマト</option>
<option value="cabbage">キャベツ</option>
</optgroup>
</select>
</dd>
<dt>対　象</dt>
<dd>
孫カテゴリ<select id="SEL3">
<option value="">---</option>
<optgroup label="apple">
<option value="orin">王林</option>
<option value="fuji">ふじ</option>
<option value="kogyoku">紅玉</option>
</optgroup>
<optgroup label="melon">
<option value="andes">アンデスメロン</option>
<option value="yubari">夕張メロン</option>
<option value="musk">マスクメロン</option>
</optgroup>
<optgroup label="tomato">
<option value="momotaro">桃太郎</option>
<option value="first">ファースト</option>
<option value="furutica">フルティカ</option>
</optgroup>
<optgroup label="cabbage">
<option value="murasaki">ムラサキキャベツ</option>
<option value="saboi">サボイキャベツ</option>
<option value="ha">ハキャベツ</option>
</optgroup>
</select>

</form>

<div id="result_text"></div>
<script>
var lastSelectTag = document.getElementById("SEL3");
var value_text = lastSelectTag.options[lastSelectTag.selectedIndex].text;
document.getElementById("result_text").innerHTML = "《あなたの選んだものは "+value_text+" です》";
</script>

<script type="text/javascript">
ConnectedSelect(['SEL1','SEL2','SEL3']);
</script>