ページのある部分のみjavascriptで別ファイルを読み込ませ(includeのような形)、
プルダウンでその部分が切り替わるように設定したいと考えております。
プルダウンをリンクとして使用したり、画像の切り替えなどは検索で探すとよく見掛けるのですが、
上記のような形は検索で探しても見つからず、困っております。
下記のURLは画像の切り替えですが、この画像の切り替え部分をそのままHTMLファイルを読み込ませて表示させるようになれば、と思っております。
http://www.geocities.co.jp/HeartLand-Kaede/3853/ …
やりたい事
・プルダウンの切り替えでページの一部分に別ファイルを読み込ませ表示させる
・プルダウンの項目を変えると同時に表示も変わる
・プルダウンの項目はそのまま差し替わった時の項目を指している
javascript初心者の為、自分で組もうにも全くと言っていいほど分からなかったので、こちらで質問させて頂きました。
分かりにくい文章で申し訳ありませんが、どうぞお力をお貸しくださいますようお願い致します。
No.2ベストアンサー
- 回答日時:
>複数の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内容
ページ1の内容
// 説明
A.html、B.html、C.htmlをUTF-8で保存します。
# Widows標準のメモ帳では無理。TeraPadなど使いましょう
ただし、サーバー環境によって違ってくるので確かではありません。
お返事が遅くなり、大変申し訳ございませんでした。
私がやりたかった事はまさしくコレで、本当に感動しております!
mikemike7さまのような知識があれば、このようなJQueryが組めるのですね。
本当にありがとうございます!
このような事をお聞きするのは大変恐縮なのですが、こちらのJQueryのライセンスはMITでしょうか?
No.3
- 回答日時:
>私がやりたかった事はまさしくコレで
解決できたようで良かったです^^
>こちらのJQueryのライセンスはMITでしょうか?
ライセンスを主張するつもりはありませんよ。
主張するくらいの代物でもないですしね。
ご自由にお使い下さい。
こんなに早くお教え下さり、ありがとうございました!
解決出来て、本当に良かったです。
また、自由に使ってもいいと仰って下さり、大変感謝しております。
本当にありがとうございました!
No.1
- 回答日時:
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">花1</option>
<option value="hana2.gif">花2</option>
<option value="hana3.gif">花3</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ファイルがあり、それをプルダウンで切り替えて表示させたいというものでした。
一番重要な部分をよく説明せずに大変申し訳ございませんでした。
ですが、頂きましたものも大変勉強になるもので、本当にうれしいです。
こちらのミスで誤解を生んでしまったとはいえ、回答頂きましたものは素晴らしいものでしたので、このまま他にご回答が頂けなかった場合はベストアンサーにさせて頂きたいと思います。
大変申し訳ありませんが、もう少しお付き合い下さればと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) [Excel2016] 相関表等の自動作成 2 2022/08/01 20:34
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- モニター・ディスプレイ 「.cur」のアイコン表示について 4 2023/03/04 10:21
- Excel(エクセル) Excelで質問です。 詳細(写真) ①黄色の部分を全てプルダウンを設定する。 ②リストはG列 ③リ 1 2023/06/16 21:54
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- モニター・ディスプレイ ワイドモニターの解像度が合わずMacの画面が横に伸ばされて表示されてしまう 2 2022/08/09 07:53
- モニター・ディスプレイ Dell G2422HSのディスプレイの入力信号の切替器やリモコンを教えてください 4 2023/05/30 17:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLのoptionタグ部分に画像を...
-
プルダウンメニューでインライ...
-
セレクトボックスの幅をプルダ...
-
リストボックス全選択について
-
プルダウンメニュー項目のフォ...
-
フォーム要素以外にもname属性...
-
submitをボタン以外にするには
-
GETをPOSTに変更したところ 送...
-
プロトコルmailtoはサポートさ...
-
【html】)パスワード認証フォー...
-
input date について
-
</form>タグを使用すると強制的...
-
動的にnema属性が変化する場合...
-
checkboxを「変更不可」にでき...
-
送信フォームを2つ用意する方法
-
送信ボタン押下時に値が未入力...
-
1アクションでPOST・GET、両方...
-
URL パラメータを使ってフォー...
-
ニフティのメールデコードにつ...
-
mailtoについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLのoptionタグ部分に画像を...
-
プルダウンメニューで、選択項...
-
2つの<select>フォームの完全...
-
プルダウンメニュー項目のフォ...
-
jQuery if文の条件分岐 (。ノд...
-
VB6.0でコントロール配列の配列...
-
セレクトボックスの幅をプルダ...
-
チェックボックスにチェックで...
-
オプションメニューのアイテム...
-
<SELECT>タグでの selected 状...
-
カタカナ変換を一発でする方法
-
プルダウンメニューアイテムの...
-
メール予約フォームを壊してし...
-
プルダウンメニューを選択した...
-
日付リストボックスの制御について
-
プルダウンのリンクについて
-
javascriptでプルダウンメニュ...
-
プルダウン 背景色の変更
-
selectの選択肢の説明を表示す...
-
プルダウンメニューでインライ...
おすすめ情報