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

Question

I'm using Brackets. 我正在使用括号。 For the first time, I'm trying to implement a script. 这是我第一次尝试实现脚本。 So I want to use this person's script: https://jsfiddle.net/patelriki13/m1ezs70o/ 所以我想使用这个人的脚本： https : //jsfiddle.net/patelriki13/m1ezs70o/

I pasted the Javascript portion inside the <head> tag 我将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]);
        }
    }   
}

I pasted the HTML portion inside the <body> tag 我将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>

And yet when the page loads, when I click on the dropdown boxes, none of the options from the Javascript code show up. 但是，当页面加载时，当我单击下拉框时，没有显示Javascript代码中的任何选项。

Is there some additional step I'm missing here? 我在这里还缺少其他步骤吗？ First time trying with scripts. 第一次尝试使用脚本。

Answer 1

Issue was solved by placing the <script> at the end of body. 通过在正文末尾放置<script>解决了问题。 Seemed like it was interfering with other possible loads. 好像它正在干扰其他可能的负载。

 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

I also faces same issue. 我也面临同样的问题。 I created another fiddle with same Data and surprisingly it wasn't loading. 我用相同的数据创建了另一个小提琴，令人惊讶的是它没有加载。

I also check if there is any additional library added. 我还要检查是否添加了任何其他库。 But no library was attached. 但是没有附加图书馆。

Finally in jsfiddle => js tab, there is option to select load type and it was on load I changed it to bottom of Head and it worked. 最后在jsfiddle => js选项卡中，有一个选项可以选择加载类型，并且on load我将其更改bottom of Head并且可以正常工作。

So if we put script inside head section or on top. 因此，如果我们将脚本放在头部或顶部。 JS will not work. JS将不起作用。 It has to be at bottom. 它必须在底部。 after HTMl loads. 在HTM1加载之后。

Fiddle 小提琴

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-07-20 18:36:00

解决方案2
1 2018-07-20 18:55:32

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-07-20 18:36:00

解决方案2 1 2018-07-20 18:55:32

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

解决方案1
1 已采纳 2018-07-20 18:36:00

解决方案2
1 2018-07-20 18:55:32