セレクトボックスとiframeの埋め込みを作成したい。

前提・実現したいこと

Wordpressを使用して下記のサイトの、以下画像部分（セレクトボックス機能と埋め込み）を作成したいです。

https://dragalialost.gamepedia.com/3D_Model_Viewer

試したこと

wordpressの「iframe」を使用して埋め込みはうまくいきましたが、
セレクトボックスの部分の作り方がわからなくて困っております。
どなたか知恵をお貸しいただけませんでしょうか。

ソースコード

[iframe width="100%" height="480px" src="https://poly.google.com/view/7S97pOzmItM/embed"]

行動規範の内容に同意します

回答1件

ベストアンサー

どうぞ（コピペです）

html
1<select id="advSelect" name="advSelect" onChange="changeModel(this)"></select>

js
1const adventurers = ["Aeleen", "Alain", "Althemia", "Amane", "Aoi", "Aurien", "Berserker", "Celliera", "Cibella", "Cleo", "Edward", "Eleonora", "Elisanne", "Erik", "Estelle", "Euden", "Ezelith", "Francesca", "Halloween Althemia", "Halloween Edward", "Halloween Elisanne", "Hawk", "Hildegarde", "Hope", "Irfan", "Joe", "Johanna", "Julietta", "Jurota", "Karina", "Karl", "Kleimann", "Lily", "Linus", "Luca", "Luther", "Malka", "Malora", "Maribelle", "Melody", "Melsa", "Mikoto", "Musashi", "Naveed", "Nefaria", "Nicolas", "Orion", "Orsem", "Philia", "Raemond", "Ranzal", "Rawn", "Renelle", "Rex", "Ricardt", "Rodrigo", "Ryozen", "Sinoa", "Sophie", "Taro", "Thaniel", "Vanessa", "Verica", "Vice", "Vida", "Waike", "Xainfried", "Xander", "Xania", "Zace", "Zardin"];
2RLQ.push(function () {
3  $(document).ready(function () {
4    initializeAdvList();
5  });
6});
7
8function initializeAdvList() {
9  if (!adventurers) {
10    return;
11  }
12  let advSelect = document.getElementById("advSelect");
13  let advList = [];
14  for (const adv of adventurers) {
15    advList.push(adv);
16  }
17  _populateSelectBox(advSelect, advList);
18}
19
20function _populateSelectBox(ele, list, defaultIndex = 0) {
21  ele.options.length = 0;
22  for (let i = 0; i < list.length; i++) {
23    let opt = document.createElement('option');
24    opt.innerHTML = list[i];
25    opt.value = list[i];
26    ele.appendChild(opt);
27  }
28  ele.selectedIndex = defaultIndex;
29}
30
31function changeModel(obj) {
32  value = obj.value;
33  modelViewer = document.getElementById("modelViewer");
34  if (getModelEmbedSrcLink(value) != '') {
35    modelViewer.innerHTML = '<iframe width="100%" height="480px" src="https://poly.google.com/view/' + getModelEmbedSrcLink(value) + '/embed" frameborder="0" style="border:none;" allowvr="yes" allow="vr; xr; accelerometer; magnetometer; gyroscope; autoplay;" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel="" ></iframe>';
36  } else {
37    modelViewer.innerHTML = 'This adventurer does not yet have a model uploaded.';
38  }
39}
40
41function getModelEmbedSrcLink(name) {
42  var modelSrcMap = new Map([
43    ["Aeleen", "7S97pOzmItM"],
44    ["Alain", "7_y06y6IRpC"],
45    ["Althemia", "bmYXZQ0D9f4"],
46    ["Amane", "f5RfG6WVBxl"],
47    ["Aoi", "3HoJ6QE-VgW"],
48    ["Aurien", "2yJGsnRyR0u"],
49    ["Berserker", "7M73oLoFUwZ"],
50    ["Celliera", "7r7z3_L4GId"],
51    ["Cibella", "7XQBlkcRllk"],
52    ["Cleo", "e4BexuEPTPB"],
53    ["Edward", "4zmNXD4dBTz"],
54    ["Eleonora", "bV52jFo8bHm"],
55    ["Elisanne", "e7pE5cBZw_B"],
56    ["Erik", "fMigQCWUsWK"],
57    ["Estelle", "bHm8Y3IR45j"],
58    ["Euden", "exjY_boCLIN"],
59    ["Ezelith", "6SfuTwuTal7"],
60    ["Francesca", "7ux2vJHPGiK"],
61    ["Halloween Althemia", "cCFpMVG3BeB"],
62    ["Halloween Edward", "fYD7mFd4biX"],
63    ["Halloween Elisanne", "0IirnspqFI6"],
64    ["Hawk", "09awd_PsjI2"],
65    ["Hildegarde", "1pwHNesJQNA"],
66    ["Hope", "edUBHZ4zUfR"],
67    ["Irfan", "bFv1qEsmhZ_"],
68    ["Joe", "1yXlGZJIrn_"],
69    ["Johanna", "3LXvcGdIA2E"],
70    ["Julietta", "5WXBldkIIZY"],
71    ["Jurota", "6qHgF5akCO_"],
72    ["Karina", "6BIsXmrzghi"],
73    ["Karl", "3OwDyIPqTi3"],
74    ["Kleimann", "8FI6msO-kP7"],
75    ["Lily", "0M3C6RVA0t2"],
76    ["Linus", "1bxq5kdL3HN"],
77    ["Luca", "0ebNtFAjts3"],
78    ["Luther", "7_eUk_kdpYf"],
79    ["Malka", "96VmCs-aB9L"],
80    ["Malora", "6UKkDMDoQmf"],
81    ["Maribelle", "cUNyU2PsVxA"],
82    ["Melody", "b2rUTwhMEvU"],
83    ["Melsa", "4mHlunpoYEY"],
84    ["Mikoto", "4vypFqh1SIX"],
85    ["Musashi", "afFNVixzkFQ"],
86    ["Naveed", "2cyOWQoXvv2"],
87    ["Nefaria", "7lvVNNkpxLi"],
88    ["Nicolas", "4rSxlI6YByb"],
89    ["Orion", "9b5lrOrvxuh"],
90    ["Orsem", "fOmPWu8ZCfB"],
91    ["Philia", "6r0GOc7cmJ6"],
92    ["Raemond", "98tsYAS7-LZ"],
93    ["Ranzal", "eKezfap1Cii"],
94    ["Rawn", "0ThGaorcAFR"],
95    ["Renelle", "dH6FmEEa4r5"],
96    ["Rex", "6QMIx_jH3AU"],
97    ["Ricardt", "6NAzfsEz-gm"],
98    ["Rodrigo", "aFUN5Re8gqz"],
99    ["Ryozen", "3jkhfKJMDVh"],
100    ["Sinoa", "bYTzcYIleZA"],
101    ["Sophie", "cDoz7-YGjR8"],
102    ["Taro", "e43-yww_nCf"],
103    ["Thaniel", "0952KAihIjY"],
104    ["Vanessa", "b8JZ5eD5HzC"],
105    ["Verica", "5apkisxI2JM"],
106    ["Vice", "0v8NyfOUu-Z"],
107    ["Vida", "eg098L9dhW7"],
108    ["Waike", "esjc3FeCtHq"],
109    ["Xainfried", "duZ1FFZrTP0"],
110    ["Xander", "drrcXlCUwKS"],
111    ["Xania", "8HHMl_q5X81"],
112    ["Zace", "0fBxkjxaNuU"],
113    ["Zardin", "0oIunJmx4Z6"]
114  ]);
115  return modelSrcMap.get(name);
116}

参照
追記

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>iframe</title>
6  <style>
7  iframe {
8    display: none;
9    width: 500px;
10    height: 500px;
11    background: #ccc;
12  }
13
14  .iframe1 {
15    background: #ccc;
16  }
17
18  .iframe2 {
19    background: #f00;
20  }
21
22  .iframe3 {
23    background: #f0f;
24  }
25
26  .iframe4 {
27    background: #00f;
28  }
29
30  </style>
31</head>
32<body>
33  <select class="select" name="name">
34    <option value="op1">iframe1</option>
35    <option value="op2">iframe2</option>
36    <option value="op3">iframe3</option>
37    <option value="op4">iframe4</option>
38  </select>
39  <button type="button" name="button" class="btn">button</button>
40
41  <iframe src="" class="iframe1"></iframe>
42  <iframe src="" class="iframe2"></iframe>
43  <iframe src="" class="iframe3"></iframe>
44  <iframe src="" class="iframe4"></iframe>
45
46  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
47  <script>
48  $(function() {
49    var value;
50
51    $('.btn').on('click', function() {
52      $('iframe').css({display:'none'});
53      value  = $("select[name='name']").val();
54
55      switch (value) {
56        case "op1":
57        $('.iframe1').css({display:'block'});
58        break;
59        case "op2":
60        $('.iframe2').css({display:'block'});
61        break;
62        case "op3":
63        $('.iframe3').css({display:'block'});
64        break;
65        case "op4":
66        $('.iframe4').css({display:'block'});
67        break;
68      }
69    });
70
71  });
72  </script>
73</body>
74</html>

投稿2018/11/13 16:35

編集2018/11/14 17:43

akihiro3

総合スコア955

koh_channel01

2018/11/13 17:10

ご回答ありがとうございます。試させていただきましたが、ほぼ形になりました。セレクトボックスが上手く機能できていなかったのですが、何がダメがご教示いただけませんでしょうか。何卒よろしくお願いいたします。・自分のホームページです。 https://gaming-lifehack.com/dragali03/ ・エラーコード Uncaught SyntaxError: Unexpected token <

akihiro3

2018/11/14 00:10

外部ファイルとして読み込まず、HTMLファイルに直接記入したらどうなりますか？

koh_channel01

2018/11/14 14:01 編集

HTMLファイルに直接記入しましたが、同じ結果となりました。。セレクトボックスのボックスの中身にテキストが表示されない状態です。。何が原因かわからず、お手上げ状態です。

akihiro3

2018/11/14 14:06

そのエラーコードの意味は分かりましたか？あと、エラーコードの行は？ちなみに、読み込みは正常にされてますか？記述ミスもないですか？

koh_channel01

2018/11/14 14:37

<div> <script> (window.RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"3D_Model_Viewer","wgTitle":"3D Model Viewer","wgCurRevisionId":21858,"wgRevisionId":21858,"wgArticleId":5504,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":[],"wgBreakFrames":true,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"3D_Model_Viewer","wgRelevantArticleId":5504,"wgRequestId":"63ce999cf5fcee45ccc5a349","wgIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgCargoMapClusteringMinimum":80,"wgCargoMonthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"wgCargoMonthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgCargoWeekDays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"wgCargoWeekDaysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"wgCollapsibleVectorEnabledModules":{"collapsiblenav":true,"experiments":true},"wgPreferredVariant":"en","wgMFExpandAllSectionsUserOption":false,"wgMFDisplayWikibaseDescriptions":{"search":false,"nearby":false,"watchlist":false,"tagline":false},"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","usePageImages":false,"usePageDescriptions":false},"wgWikiEditorEnabledModules":{"toolbar":true,"dialogs":true,"preview":true},"wgCategoryTreePageCategoryOptions":"{\"mode\":0,\"hideprefix\":20,\"showcount\":true,\"namespaces\":false}","wgVisualEditorToolbarScrollOffset":0,"wgEditSubmitButtonLabelPublish":false});mw.loader.state({"site.styles":"ready","noscript":"ready","user.styles":"ready","user":"ready","user.options":"loading","user.tokens":"loading","ext.siteGlobals.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","skins.vector.styles.responsive":"ready","ext.social.styles":"ready","mediawiki.legacy.shared":"ready","mediawiki.legacy.commonPrint":"ready","mediawiki.sectionAnchor":"ready","mediawiki.skinning.interface":"ready","skins.vector.styles":"ready","skins.hydra.netbar":"ready","skins.hydra.footer":"ready","skins.hydra.advertisements.styles":"ready"});mw.loader.implement("user.options@0j3lz3q",function($,jQuery,require,module){mw.user.options.set({"variant":"en"});});mw.loader.implement("user.tokens@0h7ex46",function ( $, jQuery, require, module ) { mw.user.tokens.set({"editToken":"+\","patrolToken":"+\","watchToken":"+\","csrfToken":"+\"});/*@nomin*/; });mw.loader.load(["ext.cargo.main","mediawiki.action.view.postEdit","site","mediawiki.page.startup","mediawiki.user","mediawiki.hidpi","mediawiki.page.ready","mediawiki.searchSuggest","ext.siteGlobals.scripts","ext.bunnyears","ext.claimWiki.styles","ext.collapsiblevector.collapsibleNav","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.hydraAuth.banners","skins.vector.js","skins.hydra.advertisements.js","skins.hydra.footer.js","ext.social.scripts"]);}); </script> </div> //セレクトボックス部分 <div> <script>const adventurers = ["Aeleen", "Alain", "Althemia", "Amane", "Aoi", "Aurien", "Berserker", "Celliera", "Cibella", "Cleo", "Edward", "Eleonora", "Elisanne", "Erik", "Estelle", "Euden", "Ezelith", "Francesca", "Halloween Althemia", "Halloween Edward", "Halloween Elisanne", "Hawk", "Hildegarde", "Hope", "Irfan", "Joe", "Johanna", "Julietta", "Jurota", "Karina", "Karl", "Kleimann", "Lily", "Linus", "Luca", "Luther", "Malka", "Malora", "Maribelle", "Melody", "Melsa", "Mikoto", "Musashi", "Naveed", "Nefaria", "Nicolas", "Orion", "Orsem", "Philia", "Raemond", "Ranzal", "Rawn", "Renelle", "Rex", "Ricardt", "Rodrigo", "Ryozen", "Sinoa", "Sophie", "Taro", "Thaniel", "Vanessa", "Verica", "Vice", "Vida", "Waike", "Xainfried", "Xander", "Xania", "Zace", "Zardin"]; RLQ.push(function() { $(document).ready(function() { initializeAdvList(); }); }); function initializeAdvList() { if (!adventurers) { return; } let advSelect = document.getElementById("advSelect"); let advList = []; for (const adv of adventurers) { advList.push(adv); } _populateSelectBox(advSelect, advList); } function _populateSelectBox(ele, list, defaultIndex = 0) { ele.options.length = 0; for (let i = 0; i < list.length; i++) { let opt = document.createElement('option'); opt.innerHTML = list[i]; opt.value = list[i]; ele.appendChild(opt); } ele.selectedIndex = defaultIndex; } function changeModel(obj) { value = obj.value; modelViewer = document.getElementById("modelViewer"); if (getModelEmbedSrcLink(value) != '') { modelViewer.innerHTML = '[iframe width="100%" height="480px" src="https://poly.google.com/view/' + getModelEmbedSrcLink(value) + '/embed" frameborder="0" style="border:none;" allowvr="yes" allow="vr; accelerometer; magnetometer; gyroscope; autoplay;" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel="" ][/iframe]'; } else { modelViewer.innerHTML = 'This adventurer does not yet have a model uploaded.'; } } function getModelEmbedSrcLink(name) { var modelSrcMap = new Map([ ["Aeleen", "7S97pOzmItM"], ["Alain", "7_y06y6IRpC"], ["Althemia", "bmYXZQ0D9f4"], ["Amane", "f5RfG6WVBxl"], ["Aoi", "3HoJ6QE-VgW"], ["Aurien", "2yJGsnRyR0u"], ["Berserker", "7M73oLoFUwZ"], ["Celliera", "7r7z3_L4GId"], ["Cibella", "7XQBlkcRllk"], ["Cleo", "e4BexuEPTPB"], ["Edward", "4zmNXD4dBTz"], ["Eleonora", "bV52jFo8bHm"], ["Elisanne", "e7pE5cBZw_B"], ["Erik", "fMigQCWUsWK"], ["Estelle", "bHm8Y3IR45j"], ["Euden", "exjY_boCLIN"], ["Ezelith", "6SfuTwuTal7"], ["Francesca", "7ux2vJHPGiK"], ["Halloween Althemia", "cCFpMVG3BeB"], ["Halloween Edward", "fYD7mFd4biX"], ["Halloween Elisanne", "0IirnspqFI6"], ["Hawk", "09awd_PsjI2"], ["Hildegarde", "1pwHNesJQNA"], ["Hope", "edUBHZ4zUfR"], ["Irfan", "bFv1qEsmhZ_"], ["Joe", "1yXlGZJIrn_"], ["Johanna", "3LXvcGdIA2E"], ["Julietta", "5WXBldkIIZY"], ["Jurota", "6qHgF5akCO_"], ["Karina", "6BIsXmrzghi"], ["Karl", "3OwDyIPqTi3"], ["Kleimann", "8FI6msO-kP7"], ["Lily", "0M3C6RVA0t2"], ["Linus", "1bxq5kdL3HN"], ["Luca", "0ebNtFAjts3"], ["Luther", "7_eUk_kdpYf"], ["Malka", "96VmCs-aB9L"], ["Malora", "6UKkDMDoQmf"], ["Maribelle", "cUNyU2PsVxA"], ["Melody", "b2rUTwhMEvU"], ["Melsa", "4mHlunpoYEY"], ["Mikoto", "4vypFqh1SIX"], ["Musashi", "afFNVixzkFQ"], ["Naveed", "2cyOWQoXvv2"], ["Nefaria", "7lvVNNkpxLi"], ["Nicolas", "4rSxlI6YByb"], ["Orion", "9b5lrOrvxuh"], ["Orsem", "fOmPWu8ZCfB"], ["Philia", "6r0GOc7cmJ6"], ["Raemond", "98tsYAS7-LZ"], ["Ranzal", "eKezfap1Cii"], ["Rawn", "0ThGaorcAFR"], ["Renelle", "dH6FmEEa4r5"], ["Rex", "6QMIx_jH3AU"], ["Ricardt", "6NAzfsEz-gm"], ["Rodrigo", "aFUN5Re8gqz"], ["Ryozen", "3jkhfKJMDVh"], ["Sinoa", "bYTzcYIleZA"], ["Sophie", "cDoz7-YGjR8"], ["Taro", "e43-yww_nCf"], ["Thaniel", "0952KAihIjY"], ["Vanessa", "b8JZ5eD5HzC"], ["Verica", "5apkisxI2JM"], ["Vice", "0v8NyfOUu-Z"], ["Vida", "eg098L9dhW7"], ["Waike", "esjc3FeCtHq"], ["Xainfried", "duZ1FFZrTP0"], ["Xander", "drrcXlCUwKS"], ["Xania", "8HHMl_q5X81"], ["Zace", "0fBxkjxaNuU"], ["Zardin", "0oIunJmx4Z6"] ]); return modelSrcMap.get(name); }</script> </div> //埋め込み部分 <div id="modelViewer"><iframe width="100%" height="480px" src="https://poly.google.com/view/7S97pOzmItM/embed" frameborder="0" style="border:none;" allowvr="yes" allow="vr; accelerometer; magnetometer; gyroscope; autoplay;" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel="" ></iframe>

koh_channel01

2018/11/14 14:47 編集

上記がソースコードですが、エラーコードはなくなりました。ボックスは表示されていて、中のテキストが表示されていない状態なので、読み込みはできていると思います。記述ミスは自分の知識不足なところもあるかもしれませんが、ない認識になります。長文となり申し訳ありませんが、よろしくお願いいたします。

akihiro3

2018/11/14 17:41

インデントや改行をしてください全く読む気になれませんあと、セレクトボックスの中が無いなら作った方が速くないですか？参考のコード追記しておきます

koh_channel01

2018/11/14 23:23

ありがとうございます！仕事から帰ったらまた試してみます。mm

行動規範の内容に同意します