window.onload が読み込まれない。
解決したいこと
該当ページのjavascriptが他のページから移動した（アクセスした）ときに読み込まれるようにしたい。
状況
RubyonRailsで地域選択画面で県と市が連動したプルダウンメニューを作っています。
ところが、プルダウンの選択肢が、
①他のページからアクセスしたときには読み込まれず、
②再読み込みをするときちんと読み込まれる、
というエラーが発生しています。
おそらく読み込みのタイミングの問題と思うのですが、今の自分の知識では分かりませんでした。
どなたか解決策をご存知の方がいれば、教えていただけないでしょうか？
①他のページから移動してくると読み込まれない
②再読み込みすると読み込まれる
問題のHTMLコード
search.html.erb
<div>
<select id="selPref" onchange="selPref(this);"></select>
<select id="selCity"></select>
</div>
<script>
//都府県の選択肢
var arr = [
{cd:"", label:"▼都府県選択"},
{cd:"13", label:"東京都"},
{cd:"23", label:"愛知県"},
{cd:"27", label:"大阪府"}
];
//市区の選択肢
var arrTokyo = [
{cd:"", label:"▼区選択"},
{cd:"1", label:"新宿区"},
{cd:"2", label:"千代田区"},
{cd:"3", label:"中央区"}
];
var arrAichi = [
{cd:"", label:"▼市選択"},
{cd:"1", label:"名古屋市"},
{cd:"2", label:"豊橋市"},
{cd:"3", label:"岡崎市"},
{cd:"4", label:"豊田市"},
{cd:"5", label:"一宮市"}
];
var arrOsaka = [
{cd:"", label:"▼市選択"},
{cd:"1", label:"大阪市"},
{cd:"2", label:"堺市"},
{cd:"3", label:"東大阪市"},
{cd:"4", label:"枚方市"},
{cd:"5", label:"豊中市"},
{cd:"6", label:"吹田市"},
{cd:"7", label:"高槻市"}
];
//都府県コンボの生成
window.onload=function(){
for(var i=0;i<arr.length;i++){
let op = document.createElement("option");
op.value = arr[i].cd;
op.text = arr[i].label;
document.getElementById("selPref").appendChild(op);
}
}
//都府県が選択された時に呼び出される処理
function selPref(obj){
var targetArr;
if(obj.value == "13"){
targetArr = arrTokyo;
}else if(obj.value == "23"){
targetArr = arrAichi;
}else if(obj.value == "27"){
targetArr = arrOsaka;
}else{
targetArr = new Array();
}
var selObj = document.getElementById('selCity');
while(selObj.lastChild){
selObj.removeChild(selObj.lastChild);
}
for(var i=0;i<targetArr.length;i++){
let op = document.createElement("option");
op.value = targetArr[i].cd;
op.text = targetArr[i].label;
selObj.appendChild(op);
}
}
</script>
参考（application.html.erbとapplication.js）
application.html.erb
<head>
<title>都市選択</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<!--追記（slickを読み込んでありますが、おそらく関係ないと思います。）-->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//= require jquery
//= require rails-ujs
//= require jquery.turbolinks
//= require activestorage
//= require turbolinks
//= require_tree .
0
