0

我有以下代码：

...<some code>...
...<elements load>...

<script type="text/javascript">

    var selected_city = document.getElementById('jform_city').value;
    var selected_province=document.getElementById('jform_province').value;

    <!-- set the onchange property for all options in provice to activate getCities() -->
    document.getElementById('jform_province').onchange = function() {
        getCities();
    }

    if(selected_province != ''){
        getCities();
    }
</script>

...<more elements load>....

<script type="text/javascript">
    alert("TEST");
    document.getElementById(selected_city).selected="1";
    </script>

它从我拥有的下拉列表中选择一个选项，问题是，如果我删除警报（“”）它由于某种原因停止工作，有什么想法吗？

4

1 回答 1

4

在尝试使用之前，您需要等待文档加载document.getElementById。警报使事情变慢，以至于在警报框后面，元素被加载。如果没有警报，当运行以下行时，很可能没有“selected_city”元素。

查看这个 StackOverflow 问题，了解有关等待页面加载的更多信息。

编辑

首先，当 Web 浏览器解析页面时，它会将接收到的 HTML 元素转换为 DOM——文档对象模型，它是页面的内存表示。只有在元素进入 DOM 之后才有可能对其进行操作，而且元素进入 DOM 的顺序不一定与它们在 HTML 中出现的顺序相同：现代快速浏览器非常异步地运行，只保证页面最终看起来好像整个事情是同步加载的。这很容易验证：几乎每个浏览器都会加载文本，甚至在获取图像时显示文本。只有在获取图像后，它才会将其插入到显示器中，如果必须的话，它会推动/重排文本。最终结果是相同的，但页面似乎以这种方式加载得更快。

不幸的是，这种“等待它”的保证不适用于 Javascript（因为 JS 本身可以改变页面加载的方式）。因此，简单地将 script 标签移动到文档的末尾与等待 DOM 包含该元素并不是一回事。

您实际上必须等待浏览器给您回电并告诉您 DOM 已加载——这是真正知道您可以操作 DOM 的唯一方法。这就是为什么window.onload，这个回调。我可以想到这对您不起作用的几个原因：

如果您实际上只是逐字插入window.onload = function();，那么您就错过了重点-这意味着不是一个空函数，而是您的函数。我假设您不只是输入它，而是以防万一，您的代码应该是

window.onload = function(){
    document.getElementById(selected_city).selected="1";
};

或者，由于window.onload=[some function]将稍后调用的函数分配给单个变量，因此只能有一个。如果您正在加载其他一些也分配的脚本window.onload，您的回调可能会丢失。

这就是为什么像 jquery 这样的框架，它有一个可以接受和回调任意数量的函数的现成函数，是前端开发人员的黄金。这是另一个 StackOverflow 问题，专门询问有关使用 onload 的问题。

最后，这一行：

var selected_city = document.getElementById('jform_city').value;

还需要在正确运行之前加载 DOM。selected_city本身可能为 null 或未定义，因为在您请求其值时未加载 #jform_city。这反过来会导致document.getElementById(selected_city)失败，即使该元素是在您尝试选择它时加载的。

异步是 Javascript 的一大痛点。

任何时候您需要从页面本身获取信息，根据经验，您必须等待 DOM 加载。实际上，这意味着几乎所有的代码（除了那些不需要加载页面的代码）都应该在页面加载后被调用的函数中。

于 2013-02-13T20:39:37.140 回答