teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

調整

2019/01/16 07:33

投稿

yambejp
yambejp

スコア117892

answer CHANGED
@@ -1,3 +1,4 @@
1
+ # text
1
2
  htmlを読み込むならajax処理
2
3
 
3
4
  ```javascript
@@ -27,4 +28,31 @@
27
28
  <option value="sinjuku.html">新宿スタジオ</option>
28
29
  </select>
29
30
  <div id="schedule"></div>
31
+ ```
32
+
33
+ # 画像
34
+ 画像を切り替えるならこんな感じ
35
+ ```javascript
36
+ <script>
37
+ window.addEventListener('DOMContentLoaded', function(e){
38
+ document.querySelector('#s1').addEventListener('change',function(e){
39
+ var v=e.target.value;
40
+ document.querySelector('#schedule').textContent="";
41
+ if(v!=""){
42
+ var img=document.createElement('img');
43
+ img.src=v;
44
+ document.querySelector('#schedule').appendChild(img);
45
+ }
46
+ });
47
+
48
+ });
49
+
50
+ </script>
51
+ <select name="studio" id="s1">
52
+ <option value="">---</option>
53
+ <option value="daikanyama.jpg">代官山スタジオ</option>
54
+ <option value="suita.jpg">吹田スタジオ</option>
55
+ <option value="sinjuku.jpg">新宿スタジオ</option>
56
+ </select>
57
+ <div id="schedule"></div>a
30
58
  ```