Question

Google在类似问题上有很多结果，但经过一天的搜索后，我仍然无法解决这个问题。

我有一个有六个选项的下拉菜单。

我有一个switch语句，我想用它来评估下拉列表中选择的项目，以确定要执行哪个document.write语句。

请记住，文档写入语句中的变量是在此代码块选择之前定义的。此外，开头标记在代码中也存在得更早。

感谢您的帮助。

    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>

Answer 1

从评论中可以看出，你缺少一个显示表格的元素。

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

所以创建一个像

这样的div

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

并更改脚本

case "Savings":
    document.getElementById("myTableContainer").innerHTML = savings
    break;

这是一个演示（选择储蓄，表格会出现）

<html>
    <body>
       <script>
          function handleSelect(account) {
            var savings = "<table><tr><td>test</td></tr></table>";
            switch(account)
            {
           case "Savings":
          document.getElementById("myTableContainer").innerHTML = savings
          break;
        }
         }
    </script>
    <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>
 <div id="myTableContainer"></div>

 </body>
</html>

Answer 2

正如您所写的那样，我认为每次调用handleSelect（）时，您的页面都会继续增加一个额外的表。你可能最好定义一个空的TABLE＆amp; TBODY标记静态，然后设置其innerHTML而不是使用document.write（）。

例如，在您的表单下方，您会有类似

的内容

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

然后你的document.write（）语句就像是

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

使用JavaScript和下拉列表更改页面内容

2 个答案: