Q&A
そうだったのですか...
HTMLの場合どのように書けばよいのでしょうか？
HTMLを使いサイトを作っているのですが下記のようにoptionタグを書くとコードがただただ長くなってしまいます。
そこでHTMLの一部を別のHTMLファイルに書きそのファイルを呼び出すことで実行するインクルードというものを使うことにより解決しようと考えました。
インクルードにもいくつか種類があるようなのですが今回はJavaScriptを使おうと思います。
JavaScriptで行う場合は
下記ように記述するみたいなのですがうまくいきません。
何か不足しているのでしょうか？
codeが長くなってしまいすみません。
html
1<!-- インクルード未実装--> 2<section> 3 <center> 4 <form name="searchform3" id="searchform3" method="get" action="#"> 5 <select name="keywords3" id="keywords3" 6 <option value="0">--</option> 7 <option value="1"> 農林・水産 </option> 8 <option value="2"> 林業 </option> 9 <option value="3"> 漁業 </option> 10 <option value="4"> 鉱業 </option> 11 <option value="5"> 建設業 </option> 12 <option value="6"> 製造業 </option> 13 <option value="7"> 電気・ガス </option> 14 <option value="8"> 運輸・通信業 </option> 15 <option value="9"> 卸売・小売・飲食業 </option> 16 <option value="10"> 金融・保険業 </option> 17 <option value="11"> 不動産業 </option> 18 <option value="12"> サービス業 </option> 19 </select> 20 <select name="keywords4" id="keywords4"> 21 <option value="0">--</option> 22 <option value="1"> 北海道 </option> 23 <option value="2"> 青森県 </option> 24 <option value="3"> 岩手県 </option> 25 <option value="4"> 宮城県 </option> 26 <option value="5"> 秋田県 </option> 27 <option value="6"> 山形県 </option> 28 <option value="7"> 福島県 </option> 29 <option value="8"> 茨城県 </option> 30 <option value="9"> 栃木県 </option> 31 <option value="10"> 群馬県 </option> 32 <option value="11"> 埼玉県 </option> 33 <option value="12"> 千葉県 </option> 34 <option value="13"> 東京都 </option> 35 <option value="14"> 神奈川県 </option> 36 <option value="15"> 新潟県 </option> 37 <option value="16"> 富山県 </option> 38 <option value="17"> 石川県 </option> 39 <option value="18"> 福井県 </option> 40 <option value="19"> 山梨県 </option> 41 <option value="20"> 長野県 </option> 42 <option value="21"> 岐阜県 </option> 43 <option value="22"> 静岡県 </option> 44 <option value="23"> 愛知県 </option> 45 <option value="24"> 三重県 </option> 46 <option value="25"> 滋賀県 </option> 47 <option value="26"> 京都府 </option> 48 <option value="27"> 大阪府 </option> 49 <option value="28"> 兵庫県 </option> 50 <option value="29"> 奈良県 </option> 51 <option value="30"> 和歌山県 </option> 52 <option value="31"> 鳥取県 </option> 53 <option value="32"> 島根県 </option> 54 <option value="33"> 岡山県 </option> 55 <option value="34"> 広島県 </option> 56 <option value="35"> 山口県 </option> 57 <option value="36"> 徳島県 </option> 58 <option value="37"> 香川県 </option> 59 <option value="38"> 愛媛県 </option> 60 <option value="39"> 高知県 </option> 61 <option value="40"> 福岡県 </option> 62 <option value="41"> 佐賀県 </option> 63 <option value="42"> 長崎県 </option> 64 <option value="43"> 熊本県 </option> 65 <option value="44"> 大分県 </option> 66 <option value="45"> 宮崎県 </option> 67 <option value="46"> 鹿児島県 </option> 68 <option value="47"> 沖縄県 </option> 69 </select> 70 <input name="buttun1" id="buttun1" value="検索" type="submit" /> 71 </form> 72 </center> 73</section> 74 75/////////////////////////////////////////////////////////////////////////////////////// 76<!-- インクルード実装--> 77<section> 78 <center> 79 <form name="searchform3" id="searchform3" method="get" action="#"> 80 <select name="keywords3" id="keywords3" 81 <script> 82 include("sample.html"); 83 </script> 84 </select> 85 <select name="keywords4" id="keywords4"> 86 <script> 87 include("test.html"); 88 </script> 89 </select> 90 <input name="buttun1" id="buttun1" value="検索" type="submit" /> 91 </form> 92 </center> 93</section> 94 95 96<!--sample.html--> 97 <option value="0">--</option> 98 <option value="1"> 農林・水産 </option> 99 <option value="2"> 林業 </option> 100 <option value="3"> 漁業 </option> 101 <option value="4"> 鉱業 </option> 102 <option value="5"> 建設業 </option> 103 <option value="6"> 製造業 </option> 104 <option value="7"> 電気・ガス </option> 105 <option value="8"> 運輸・通信業 </option> 106 <option value="9"> 卸売・小売・飲食業 </option> 107 <option value="10"> 金融・保険業 </option> 108 <option value="11"> 不動産業 </option> 109 <option value="12"> サービス業 </option> 110 111 112<!--test.html--> 113 114 <option value="0">--</option> 115 <option value="1"> 北海道 </option> 116 <option value="2"> 青森県 </option> 117 <option value="3"> 岩手県 </option> 118 <option value="4"> 宮城県 </option> 119 <option value="5"> 秋田県 </option> 120 <option value="6"> 山形県 </option> 121 <option value="7"> 福島県 </option> 122 <option value="8"> 茨城県 </option> 123 <option value="9"> 栃木県 </option> 124 <option value="10"> 群馬県 </option> 125 <option value="11"> 埼玉県 </option> 126 <option value="12"> 千葉県 </option> 127 <option value="13"> 東京都 </option> 128 <option value="14"> 神奈川県 </option> 129 <option value="15"> 新潟県 </option> 130 <option value="16"> 富山県 </option> 131 <option value="17"> 石川県 </option> 132 <option value="18"> 福井県 </option> 133 <option value="19"> 山梨県 </option> 134 <option value="20"> 長野県 </option> 135 <option value="21"> 岐阜県 </option> 136 <option value="22"> 静岡県 </option> 137 <option value="23"> 愛知県 </option> 138 <option value="24"> 三重県 </option> 139 <option value="25"> 滋賀県 </option> 140 <option value="26"> 京都府 </option> 141 <option value="27"> 大阪府 </option> 142 <option value="28"> 兵庫県 </option> 143 <option value="29"> 奈良県 </option> 144 <option value="30"> 和歌山県 </option> 145 <option value="31"> 鳥取県 </option> 146 <option value="32"> 島根県 </option> 147 <option value="33"> 岡山県 </option> 148 <option value="34"> 広島県 </option> 149 <option value="35"> 山口県 </option> 150 <option value="36"> 徳島県 </option> 151 <option value="37"> 香川県 </option> 152 <option value="38"> 愛媛県 </option> 153 <option value="39"> 高知県 </option> 154 <option value="40"> 福岡県 </option> 155 <option value="41"> 佐賀県 </option> 156 <option value="42"> 長崎県 </option> 157 <option value="43"> 熊本県 </option> 158 <option value="44"> 大分県 </option> 159 <option value="45"> 宮崎県 </option> 160 <option value="46"> 鹿児島県 </option> 161 <option value="47"> 沖縄県 </option>
回答5件
0
ベストアンサー
html
1<script> 2 include("sample.html"); 3</script>
このような記述だけでインクルード処理を行う機能は、javascriptにはありません。
この記述だけでやるためには、それが動作するようなライブラリを利用する必要があります。
おそらくですが、「javascript include」でググって、
JavaScriptで外部HTMLをインクルードする
http://qitailang.small.jp/webtech/include/
にたどり着かれましたね？
よく見て下さい。
html
1<script type = "text/javascript" src = "include.js">
という記述がありますよね。include.jsという外部jsファイルをサーバのindex.htmlと同じフォルダにおいているなら動作するという意味です。
このinclude.jsの記述を見ましたが、現在の常識からすれば好ましくない動作を含んでいますので、利用することはおすすめできません。
おすすめしたいのは、phpの利用です。
index.htmlをindex.phpとファイル名を変えるのと、上記のscriptタグ部分を
php
1<?php 2 include("sample.html"); 3?>
こう変えるだけで動作しますよ。
投稿2017/07/31 06:13
総合スコア1449
0
includeという関数は、標準的なブラウザ環境には用意されていません（PHPならincludeでこういうことは可能ですが）。
投稿2017/07/31 05:57
総合スコア146543
0
静的なHTMLであれば、直に書いてしまって問題ないと思いますよ。
おすすめはしませんが、例えば以下のようにdomをjsで操作してやれば可能ではあります。
JavaScript
1window.addEventListener('DOMContentLoaded', () => { 2 var industry = [ 3 { value: 1, label: '農林・水産' }, 4 { value: 2, label: '林業' }, 5 { value: 3, label: '漁業' }, 6 { value: 4, label: '鉱業' }, 7 { value: 5, label: '建設業' }, 8 { value: 6, label: '製造業' }, 9 { value: 7, label: '電気・ガス' }, 10 { value: 8, label: '運輸・通信業' }, 11 { value: 9, label: '卸売・小売・飲食業' }, 12 { value: 10, label: '金融・保険業' }, 13 { value: 11, label: '不動産業' }, 14 { value: 12, label: 'サービス業' } 15 ].map(o => `<option value="${o.value}">${o.label}</option>`).join('') 16 17 document.querySelector('#keywords3').innerHTML = industry 18}, false)
投稿2017/07/31 06:32
編集2017/07/31 06:37
総合スコア127
0
外部ファイルがただただ長くなるなら何も改善しない気がするのですが……。
select以下に<script>は書けません。(ちなみに<section>があるのでHTML5だと思いますが、center要素は廃止されています。)
なので、</body>直前あたりにスクリプトを書いて、DOM操作することになると思います。
外部リソース取得方法は、Ajax / Fetch API あたりで調べればたくさん出てくると思います。
投稿2017/07/31 06:11
総合スコア13749
回答ありがとうございます。
その方が見やすいと思ったのですがそんなことはないのでしょうか？
そうだったのですね。
勉強不足でした。すみません...
検索してみます。
ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/31 06:27
2017/07/31 06:29
2017/07/31 06:43
2017/07/31 06:58
2017/07/31 07:04