0

我是 Javascript 的初学者，我试图弄明白为什么有些东西不起作用。我创建了一个简单的页面，在该<head>部分中包含一些参考数组，然后我可以在<body>“头部”部分中访问这些参考数组，如下所示：

<!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>
  ...

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

4

3 回答 3

3

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

改成

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

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

未在函数范围内定义的变量会自动添加到window对象中，在浏览器环境中是全局范围。所以不需要定义任何像global关键字这样的东西。

其他注意事项：

  • 定义全局变量被认为是不好的做法。当您加载多个脚本时，它可能会导致变量冲突。
  • document.write通常不是一个好主意。最好使用诸如innerHTML在页面中获取动态内容之类的东西。
于 2013-02-08T16:42:32.340 回答
1

从城市前面删除 global 并使用 document.GetElementById 而不是 document.write。也不需要在选择标签之间有脚本，因为您有对选择 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 脚本冲突。

于 2013-02-08T16:43:19.267 回答
1

从哪里开始...首先，将您的 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上看到它的实际效果。

于 2013-02-08T17:29:16.790 回答