Using JavaScript and a dropdown to change page content
Google has plenty of results for similar problems, but after a day of searching, I still cannot figure this out.
I have a dropdown menu with six choices.
I have a switch statement with which I would like to evaluate the chosen item in the dropdown list to determine which document.write statements to execute.
Please keep in mind that the variables in the document write statements are defined before this block of code picks up. Also, the opening tag exists much earlier in the code as well.
Thank you for your help.
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>
It seems from the comments that you are lacking an element to show the tables in.
Try adding a div element to the page in the position you want the table, and then setting the innerHTML of the div to be the table html you wish to display.
so create a div like
<div id="myTableContainer"></div>
and change the script
case "Savings":
document.getElementById("myTableContainer").innerHTML = savings
break;
Here is a demo (Select savings and the table will appear)
<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>
As you've written this, I think your page would continue to grow with an additional table each time handleSelect() is called. You might be better off defining an empty TABLE & TBODY tag statically and then setting its innerHTML instead of using document.write().
For example, below your form you'd have something like
<table><tbody id="myContent"></tbody></table>
And then your document.write() statements would instead be something like
document.getElementById("myContent").innerHTML = cdjumbo + cdsmall;
加载中,请稍侯......
精彩评论