JavaScript，更改页面内容

javascript, changing page content

本文关键字：JavaScript      更新时间：2023-09-26

我正在尝试做一个使用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 来完成。除此之外，如果您能引导我如何进行，那也很棒。例如，我可以从选项项的值中引用它们吗？

我的解决方案是：

<html>
<head>
<script type="text/javascript">
function initialTypeCorrection()
{
    var selectBox = document.getElementById("a96780");
    if(selectBox != null)
    {
            var options = selectBox.getElementsByTagName("option");
            for (var i = 0; i < options.length; i ++) 
            {   
                // Alternative 1
                if(options[i].value=="1111294" || options[i].value=="1111292" || options[i].value=="1111290")
                {
                    options[i].disabled = "true"; 
                    options[i].text = ""; 
                }
            }
    }
}
window.onload = initialTypeCorrection;
</script>
</head>
<body>
<select id="a96780" multiple="multiple" name="a96780" size="4">
<option selected="selected" value="#ANY">all</option>
<option value="1111294">a1</option>
<option value="1111292">a2</option>
<option value="1111290">a3</option>
</select>
</body>
</html>

你可能想试试

<body onload="myFunction()">

而不是在脚本标签中调用它，因为 body 标签中的内容在 JavaScript 时没有初始化。

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

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

<body onload="myFunction();">

这是一个工作示例：（您的代码）

http://jsfiddle.net/44fQX/

任何问题都问:)

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

函数关闭所有选项（） {    var slc = document.getElementById（"a96780"）， i， opt;    for （i=0; opt=slc[i]; i++） {        if （opt.value！="#ANY"） {            选择禁用=真;            更新            opt.style.display="none";        }    }           }函数关系所有选项（） {    var slc = document.getElementById（"a96780"）， i， opt;    for （i=0; opt=slc[i]; i++） {        opt.disabled=false;        更新        opt.style.display=";    }           }

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

更新http://jsfiddle.net/44fQX/3/

相关文章：