为什么这个 JsFiddle 没有加载到我的页面上？（使用括号）

Question

我正在使用括号。这是我第一次尝试实现一个脚本。所以我想用这个人的脚本： https://jsfiddle.net/patelriki13/m1ezs70o/

我将 Javascript 部分粘贴到 <head> 标签内

var countryStateInfo = {
    "USA": {
        "California": {
            "Los Angeles": ["90001", "90002", "90003", "90004"],
            "San Diego": ["92093", "92101"]
        },
        "Texas": {
            "Dallas": ["75201", "75202"],
            "Austin": ["73301", "73344"]
        }
    },
    "India": {
        "Assam": {
            "Dispur": ["781005"],
            "Guwahati" : ["781030", "781030"]
        },
        "Gujarat": {
            "Vadodara" : ["390011", "390020"],
            "Surat" : ["395006", "395002"]
        }
    }
}


window.onload = function () {

    //Get html elements
    var countySel = document.getElementById("countySel");
    var stateSel = document.getElementById("stateSel"); 
    var citySel = document.getElementById("citySel");
    var zipSel = document.getElementById("zipSel");

    //Load countries
    for (var country in countryStateInfo) {
        countySel.options[countySel.options.length] = new Option(country, country);
    }

    //County Changed
    countySel.onchange = function () {

         stateSel.length = 1; // remove all options bar first
         citySel.length = 1; // remove all options bar first
         zipSel.length = 1; // remove all options bar first

         if (this.selectedIndex < 1)
             return; // done

         for (var state in countryStateInfo[this.value]) {
             stateSel.options[stateSel.options.length] = new Option(state, state);
         }
    }

    //State Changed
    stateSel.onchange = function () {        

         citySel.length = 1; // remove all options bar first
         zipSel.length = 1; // remove all options bar first

         if (this.selectedIndex < 1)
             return; // done

         for (var city in countryStateInfo[countySel.value][this.value]) {
             citySel.options[citySel.options.length] = new Option(city, city);
         }
    }

    //City Changed
    citySel.onchange = function () {
        zipSel.length = 1; // remove all options bar first

        if (this.selectedIndex < 1)
            return; // done

        var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
        for (var i = 0; i < zips.length; i++) {
            zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
        }
    }   
}

我将 HTML 部分粘贴到 <body> 标签内

<form name="myform" id="myForm">
  <select id="countySel" size="1">
        <option value="" selected="selected">-- Select Country --</option>
    </select>
     <br>
    <br>

    <select id="stateSel" size="1">
        <option value="" selected="selected">-- Select State--</option>
    </select>
    <br>
    <br>    
    <select id="citySel" size="1">
        <option value="" selected="selected">-- Select City--</option>
    </select>
    <br>
    <br>
    <select id="zipSel" size="1">
        <option value="" selected="selected">-- Select Zip--</option>
    </select>
</form>

然而，当页面加载时，当我单击下拉框时，Javascript 代码中的 none 个选项会出现。

这里我还缺少一些额外的步骤吗？第一次尝试使用脚本。

Answer 1

问题已通过将 <script> 放在正文末尾解决。似乎它正在干扰其他可能的负载。

var countryStateInfo = {
 "USA": {
  "California": {
   "Los Angeles": ["90001", "90002", "90003", "90004"],
   "San Diego": ["92093", "92101"]
  },
  "Texas": {
   "Dallas": ["75201", "75202"],
   "Austin": ["73301", "73344"]
  }
 },
 "India": {
  "Assam": {
   "Dispur": ["781005"],
   "Guwahati" : ["781030", "781030"]
  },
  "Gujarat": {
   "Vadodara" : ["390011", "390020"],
   "Surat" : ["395006", "395002"]
  }
 }
}


window.onload = function () {
 
 //Get html elements
 var countySel = document.getElementById("countySel");
 var stateSel = document.getElementById("stateSel"); 
 var citySel = document.getElementById("citySel");
 var zipSel = document.getElementById("zipSel");
 
 //Load countries
 for (var country in countryStateInfo) {
  countySel.options[countySel.options.length] = new Option(country, country);
 }
 
 //County Changed
 countySel.onchange = function () {
   
   stateSel.length = 1; // remove all options bar first
   citySel.length = 1; // remove all options bar first
   zipSel.length = 1; // remove all options bar first
   
   if (this.selectedIndex < 1)
    return; // done
   
   for (var state in countryStateInfo[this.value]) {
    stateSel.options[stateSel.options.length] = new Option(state, state);
   }
 }
 
 //State Changed
 stateSel.onchange = function () {   
   
   citySel.length = 1; // remove all options bar first
   zipSel.length = 1; // remove all options bar first
   
   if (this.selectedIndex < 1)
    return; // done
   
   for (var city in countryStateInfo[countySel.value][this.value]) {
    citySel.options[citySel.options.length] = new Option(city, city);
   }
 }
 
 //City Changed
 citySel.onchange = function () {
  zipSel.length = 1; // remove all options bar first
  
  if (this.selectedIndex < 1)
   return; // done
  
  var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
  for (var i = 0; i < zips.length; i++) {
   zipSel.options[zipSel.options.length] = new Option(zips[i], zips[i]);
  }
 } 
}

<form name="myform" id="myForm">
  <select id="countySel" size="1">
        <option value="" selected="selected">-- Select Country --</option>
    </select>
     <br>
    <br>
  
    <select id="stateSel" size="1">
        <option value="" selected="selected">-- Select State--</option>
    </select>
    <br>
    <br>    
    <select id="citySel" size="1">
        <option value="" selected="selected">-- Select City--</option>
    </select>
    <br>
    <br>
    <select id="zipSel" size="1">
        <option value="" selected="selected">-- Select Zip--</option>
    </select>
</form>

<p>First select a country => state => city => zipcode</p>

Answer 2

我也遇到了同样的问题。我用相同的数据创建了另一个 fiddle，令人惊讶的是它没有加载。

我还检查是否添加了任何额外的库。但是没有附加图书馆。

最后在 jsfiddle => js 选项卡中，有 select 加载类型的选项，它是 on load 我将其更改为 bottom of Head 并且它起作用了。

因此，如果我们将脚本放在 head 部分或顶部。 JS 不会工作。它必须在底部。 HTMl 加载后。

Fiddle

为什么这个 JsFiddle 没有加载到我的页面上？（使用括号）

Why doesn't this JsFiddle load on my page? (using Brackets)

javascript

onload

为什么这个 JsFiddle 没有加载到我的页面上？ （使用括号）

Why doesn't this JsFiddle load on my page? (using Brackets)

javascript

onload

为什么这个 JsFiddle 没有加载到我的页面上？（使用括号）