プルダウンの切り替えについて

ページのある部分のみjavascriptで別ファイルを読み込ませ（includeのような形）、
プルダウンでその部分が切り替わるように設定したいと考えております。

プルダウンをリンクとして使用したり、画像の切り替えなどは検索で探すとよく見掛けるのですが、
上記のような形は検索で探しても見つからず、困っております。

下記のURLは画像の切り替えですが、この画像の切り替え部分をそのままHTMLファイルを読み込ませて表示させるようになれば、と思っております。
http://www.geocities.co.jp/HeartLand-Kaede/3853/ …

やりたい事
・プルダウンの切り替えでページの一部分に別ファイルを読み込ませ表示させる
・プルダウンの項目を変えると同時に表示も変わる
・プルダウンの項目はそのまま差し替わった時の項目を指している

javascript初心者の為、自分で組もうにも全くと言っていいほど分からなかったので、こちらで質問させて頂きました。

分かりにくい文章で申し訳ありませんが、どうぞお力をお貸しくださいますようお願い致します。

No.2 ベストアンサー 回答者： mikemike7 回答日時： 2011/06/09 02:19

>複数のHTMLファイルがあり、それをプルダウンで切り替えて表示させたいというものでした。

まあ、大して変わりないです。
同じようにloadで表示させましょう。


// JavaScript部
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript"><!--

function loadpage(htmlfile){
if(htmlfile == ""){return false;}
$("#load").load(htmlfile);
}
--></script>


// メインHTML部
<select onchange="loadpage(this.value)">
<option value="">ページ選択</option>
<option value="A.html">ページA</option>
<option value="B.html">ページB</option>
<option value="C.html">ページC</option>
</select>
<div id="load"></div>


// A.html内容
ページ１の内容


// 説明
A.html、B.html、C.htmlをUTF-8で保存します。
# Widows標準のメモ帳では無理。TeraPadなど使いましょう
ただし、サーバー環境によって違ってくるので確かではありません。

この回答へのお礼

お返事が遅くなり、大変申し訳ございませんでした。

私がやりたかった事はまさしくコレで、本当に感動しております！
mikemike7さまのような知識があれば、このようなJQueryが組めるのですね。
本当にありがとうございます！

このような事をお聞きするのは大変恐縮なのですが、こちらのJQueryのライセンスはMITでしょうか？

お礼日時：2011/06/10 21:38

No.3 回答者： mikemike7 回答日時： 2011/06/10 23:16

>私がやりたかった事はまさしくコレで

解決できたようで良かったです＾＾

>こちらのJQueryのライセンスはMITでしょうか？
ライセンスを主張するつもりはありませんよ。
主張するくらいの代物でもないですしね。
ご自由にお使い下さい。

この回答へのお礼

こんなに早くお教え下さり、ありがとうございました！
解決出来て、本当に良かったです。

また、自由に使ってもいいと仰って下さり、大変感謝しております。

本当にありがとうございました！

お礼日時：2011/06/14 19:35

No.1 回答者： mikemike7 回答日時： 2011/06/08 03:15

JQueryで簡単に作ってみました。

基本的に参考URLの仕組みで作っています。


メインのHTML部

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript"><!--
var requestfile = "select.html"; // 読み込みたいファイル名

$(function(){
$("#load").load(requestfile);
});

function look(img){
$("#img").attr("src",img);
}
--></script>
<div id="load"></div>


外部の読み込みたいファイル（select.html）

<select onchange="look(this.value)">
<option value="">画像を選ぶべし</option>
<option value="hana1.gif">花１</option>
<option value="hana2.gif">花２</option>
<option value="hana3.gif">花３</option>
</select>
<p><img src="hana1.gif" id="img"></p>


以上です。

外部ファイルは他のドメインのファイルを指定はできません。

外部ファイルを読み込む場合、文字化けすることがあります。
できれば、UTF-8で外部ファイルを作成すると良いかも。
# Widows標準のメモ帳では無理。TeraPadなど使いましょう
ただし、サーバー環境によって違ってくるので確かではありません。

この回答へのお礼

ご回答ありがとうございます！

簡単とおっしゃってますが、わざわざJQueryで作って下さって本当に感謝しております。

ただ、私の説明不足で大変申し訳ございません。

プルダウンのAを選択したら、切り替え部分にA.htmlを表示する。
プルダウンのBを選択したら、切り替え部分にB.htmlを表示する。
プルダウンのCを選択したら、切り替え部分にC.htmlを表示する。

<select onchange="○○○">
<option value="A.html">AAA</option>
<option value="B.html">BBB</option>
<option value="C.html">CCC</option>
</select>

<div id="○○○"></div> ←ファイルを表示させたい部分

のように複数のHTMLファイルがあり、それをプルダウンで切り替えて表示させたいというものでした。
一番重要な部分をよく説明せずに大変申し訳ございませんでした。
ですが、頂きましたものも大変勉強になるもので、本当にうれしいです。

こちらのミスで誤解を生んでしまったとはいえ、回答頂きましたものは素晴らしいものでしたので、このまま他にご回答が頂けなかった場合はベストアンサーにさせて頂きたいと思います。
大変申し訳ありませんが、もう少しお付き合い下さればと思います。

お礼日時：2011/06/09 01:46