Question

我正在尝试使用javascript来更改页面内容的示例。假设我有一个页面：

<html>
<head>
</head>
<body>
<select id="a96780" multiple="multiple" name="a96780" size="3" value="deneme">
<option selected="selected" value="#ANY">ALL</option>
<option value="1111294">Ex1</option>
<option value="1111292">Ex2</option>
<option value="1111290">Ex3</option>
</select>
</body>
</html>

我希望能够在页面加载时关闭所有选项，Ex1，Ex2，Ex3（将其类型设置为隐藏或通过其他方式）。为了达到这个目的，我按照在线说明进行操作，但是没有这样做：

<script type="text/javascript">

function myFunction()
{
var selectBox = document.getElementById("a96780");
alert("smt");
alert(selectBox.name);
}

myFunction();

</script>

在上面的脚本中，我正在尝试打印出元素的名称，以确认我实际上已经掌握了它。但是最后一行从未打印过。我如何确认我已将元素初始化为selectBox，我该如何从那里开始。选项值是否足以引用项目：“Ex1，Ex2和Ex3”？

编辑1：我绝对没有链接到html，我不能修改body标签，也不能放任何可以启动myFunction的按钮，因此无论我做什么，我必须只用js来做。除此之外，如果你能引导我如何继续下去，也会很棒。例如，我可以从他们的值中引用选项吗？

Answer 1

您可能想尝试

<body onload="myFunction()">

而不是在脚本标记中调用它，因为当javascript出现时，body标记中的内容未初始化。

Answer 2

您需要等到DOM完全加载。这意味着HTML已被浏览器理解和组织。如果在此之前执行javascript，则元素将不存在，因此不会被操纵或打印。

等待DOM加载的一种方法是将函数调用放入body标签的onload ...

<body onload="myFunction();">

Answer 3

下面是一个有效的例子:(你的代码）

http://jsfiddle.net/44fQX/

任何问题只是问：）

Answer 4

重新定位问题的这一部分：“我希望能够在页面加载时关闭所有选项，Ex1，Ex2，Ex3（将其类型设置为隐藏或通过其他方式）”

function closeAllOptions() {
    var slc = document.getElementById("a96780"), i, opt;
    for (i=0; opt=slc[i]; i++) {
        if (opt.value!="#ANY") {
            opt.disabled=true;
            // update
            opt.style.display="none";
        }
    }            
}
function relaseAllOptions() {
    var slc = document.getElementById("a96780"), i, opt;
    for (i=0; opt=slc[i]; i++) {
        opt.disabled=false;
        // update
        opt.style.display="";
    }            
}

测试：http://jsfiddle.net/44fQX/1/

<强>更新 http://jsfiddle.net/44fQX/3/

javascript，更改页面内容

4 个答案: