使用JavaScript和下拉菜单更改页面内容

谷歌有很多类似问题的搜索结果，但经过一天的搜索，我仍然无法弄清楚这一点

我有六个选择的下拉菜单

我有一个switch语句，我想用它计算下拉列表中所选的项，以确定要执行哪个document.write语句

请记住，documentwrite语句中的变量是在提取这段代码之前定义的。此外，开始标记也早在代码中就存在了

谢谢你的帮助

    function handleSelect(account)
    {
        //var selectedAcct = document.getElementByName("acctTypes");

        document.write("<table><tbody>");

        switch(account)
        {

            case "View All":
                document.write(savings);
                document.write(checking);
                document.write(moneymkt);
                document.write(cdjumbo);
                document.write(cdsmall);
                document.write(iras);
                break;
            case "Certificates of Deposit (CDs)":
                document.write(cdjumbo);
                document.write(cdsmall);
                break;
            case "Individual Retirement Account (IRA)":
                document.write(iras);
                break;
            case "Money Market":
                document.write(moneymkt);
                break;
            case "Savings":
                document.write(savings);
                break;
            case "Checking":
                document.write(checking);
                break;
            default:
                document.write(savings);
                document.write(checking);
                document.write(moneymkt);
                document.write(cdjumbo);
                document.write(cdsmall);
                document.write(iras);
        }

        document.write("</tbody></table>");
    }


</script>

<form name="acctTypes" action=" ">
    <select name="acctDropdown" id="acctDropdown" onLoad="handleSelect(this.value)" onChange="handleSelect(this.value)">
        <option value="View All" selected>View All</option>
        <option value="Certificates of Deposit (CDs)">Certificates of Deposit (CDs)</option>
        <option value="Individual Retirement Account (IRA)">Individual Retirement Account (IRA)</option>
        <option value="Money Market">Money Market</option>
        <option value="Savings">Savings</option>
        <option value="Checking">Checking</option>
    </select>
</form>

功能手柄选择（账户）
{
//var selectedAcct=document.getElementByName（“acttypes”）；
文件。填写（“”）；
转换（帐户）
{
案例“全部查看”：
文件。书写（储蓄）；
文件。书写（检查）；
书面文件（moneymkt）；
文件编写（cdjumbo）；
文件。编写（CDS）；
文件编写（iras）；
打破
案例“存款证（CDs）”：
文件编写（cdjumbo）；
文件。编写（CDS）；
打破
案例“个人退休账户（IRA）”：
文件编写（iras）；
打破
案例“货币市场”：
书面文件（moneymkt）；
打破
案例“储蓄”：
文件。书写（储蓄）；
打破
案例“检查”：
文件。书写（检查）；
打破
违约：
文件。书写（储蓄）；
文件。书写（检查）；
书面文件（moneymkt）；
文件编写（cdjumbo）；
文件。编写（CDS）；
文件编写（iras）；
}
文件。填写（“”）；
}
查看所有
存单
个人退休帐户（IRA）
货币市场
储蓄
检查

从注释中可以看出，您缺少用于显示表格的元素

尝试将div元素添加到页面中希望显示表的位置，然后将div的innerHTML设置为希望显示的表html

因此，创建一个类似于

<div id="myTableContainer"></div>

这是一个演示（选择savings，将显示该表）

功能handleSelect（帐户）{
var savings=“test”；
转换（帐户）
{
案例“储蓄”：
document.getElementById（“myTableContainer”）.innerHTML=savings
打破
}
}
查看所有
存单
个人退休帐户（IRA）
货币市场
储蓄
检查

在编写本文时，我认为每次调用handleSelect（）时，您的页面将继续增长，并增加一个表。您最好静态定义一个空表&TBODY标记，然后设置其innerHTML，而不是使用document.write（）

例如，在你的表格下面，你会看到

<table><tbody id="myContent"></tbody></table>

document.getElementById("myContent").innerHTML = cdjumbo + cdsmall;

---

当您尝试此操作时，实际出现的错误是什么？我不知道您的问题是什么。例如，当你运行它时，你得到了什么？你希望得到什么？据我所知，我一点也没有错。页面加载的是下拉列表，没有表格，当我选择其他下拉列表项时，它似乎什么也不做。document.write语句中的变量根据执行的语句组合形成不同的表格。我的期望是在页面加载时看到由所有不同表组成的表，然后根据我选择的下拉选项看到较小的表部分。当运行代码时，您当前看到了什么？它只显示一张桌子吗？还是没有桌子？当您更改下拉列表时是否正在更新？谢谢，rabs。例如，变量savings是一系列包含表容器的串联字符串。如果我注释掉除document.write语句以外的所有语句，则该表工作正常。我是否正确定义了account变量？您可能需要类似“handleSelect（this.options[this.selectedIndex].value）”的内容，account变量将作为所选值（因为您具有onChange内联）您不需要使用selectedIndex.change所有document.write语句到document.getElementById（“myTableContainer”）.innerHTML=并将该div myTableContainer添加到页面中，它将起作用谢谢您的建议。我会想办法解决这个问题。我的桌子大小不一，但我想我明白你的意思。我仍然担心我不知道如何告诉它要填充表中的内容。如果您使用的是像YUI或jQuery这样的JavaScript框架，那么包含的一些工具将使这项工作（及其调试）更容易。即使您不是，您也可以从Firebug等浏览器工具和IE9/Chrome附带的内置开发工具中获益，以检查变量和/或逐步完成脚本。最基本的JS调试工具之一（除非您没有其他选项，否则我一般不推荐使用）是在代码中插入alert（）调用。谢谢你们的帮助。我将仔细研究一下，并采纳你的建议。

<table><tbody id="myContent"></tbody></table>

document.getElementById("myContent").innerHTML = cdjumbo + cdsmall;