Question

我是Javascript的初学者，我想弄清楚为什么某些东西不起作用。我在<head>部分创建了一个带有一些参考数组的简单页面，然后我可以在<body>中访问，所以head部分看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <script>
      var cities = [ "London", "New York" ];
    </script>
  </head>

我想使用这个数组来驱动HTML正文中的下拉列表，所以我想我会用它：

<body>
  <select id="dd_city">
    <script>
      for( i = 0; i < cities.length; i++)
      {
        document.write( "<option value=" + i + ">" + cities[i] + "</option>" )
      }
    </script>
  </select>
  ...

我认为这是合理的，它基于我在网上找到的例子。但是，我发现它只是产生一个空的下拉，好像数组被视为空。我有什么误解或错了？

Answer 1

你的语法错了。 JavaScript中没有关键字global。

更改为

<script>
  var cities = [ "London", "New York" ];
</script>

^{您的语法应该在控制台中给您错误！}

未在函数范围内定义的变量会自动添加到window对象中，该对象在浏览器环境中是全局范围。因此，无需定义任何类似global关键字的内容。

其他说明：

定义全局变量被认为是不好的做法。当您加载多个脚本时，它可能导致可变冲突。
document.write通常不是一个好主意。更好地使用innerHTML之类的内容来获取页面中的动态内容。

Answer 2

从城市前面删除全局并使用document.GetElementById而不是document.write。也不需要在select标签之间有脚本，因为你有对select id的引用。

尝试

<head>
    <script>
        var cities = ["London", "New York"];
    </script>
</head>

<body>
    <select id="dd_city"/>
        <script>
            for (i = 0; i < cities.length; i++) {
                var option = "<option value=" + i + ">" + cities[i] + "</option>";
                document.getElementById("dd_city").innerHTML += option;
            }
        </script>
</body>

我还建议不要使用全局变量，因为这可能与其他javaScript脚本冲突。

Answer 3

从哪里开始......首先，在关闭正文标记之前将javascript放在文档底部是个好习惯。请参阅以下链接，了解其原因：

http://developer.yahoo.com/performance/rules.html#js_bottom

当您在文档底部包含javascript文件时，您将被迫将代码括在函数中并将这些函数绑定到不同的事件。 javascript是一种事件驱动的语言。

这将鼓励您编写可在整个项目中重复使用的更好的代码。我不打算写一篇关于编写优秀代码的长篇大论，但我建议你拿一本好书来帮助你入门。比如Javascript The Definitive Guide.

关于你目前的代码，这是我将如何做到的：

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
      <select id="dd_city"></select>
      <script>
          var initPage = function() {
              var cities = Array("London", "New York");
              var selectBox = document.getElementById("dd_city");

              for( var i = 0; i < cities.length; i++)
              {
                  var option = document.createElement("option");

                  option.setAttribute("value", i);
                  option.innerHTML = cities[i];
                  selectBox.appendChild(option);
              }
          };

          window.onload = initPage();
      </script>
    </body>
</html>

在我的jsfiddle.

中查看它

Javascript代码无法访问数组

3 个答案: