<script type="text/javascript">
var table=[{name:"aaa",code:"t_01"},{name:"bbb",code:"t_02"}]
var date = {"t_01":[{name:"000",code:"111"},{name:"222",code:"333"}],"t_02":[{name:"444",code:"555"},{name:"666",code:"777"}]}
function settable()
{
var content = document.getElementById("table");
for(var i=0;i<table.length;i++)
{
var p=table[i];
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(p.name));
oOption.setAttribute("value", p.code);
content.appendChild(oOption);
//content.add(new Option(p.name,p.code));
}
}
function setdata(d)
{
var content = document.getElementById("date");
alert(date.t_02[1].code);
}
</script>
<body onload="settable();">
<br /><br />
<table align="center" border="0" cellpadding="5" cellspacing="0" width="100%" style="border:1px #0099FF solid">
<tr>
<td align="right"><span style="padding-right:5px;">选择功能：</span></td>
<td align="left">
<span style="padding-left:2px;">
<select id="table" name="table" onchange="setdata(this.value)">
<option value="">请选择</option>
</select>
<select id="date" name="date">
<option value="">请选择</option>
</select>
</span>
</td>
</tr>
<tr><td height="5" colspan="2"></td></tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提 交" style="width:60px; height:22px;"> </td>
</tr>
</table>
</body>对代码的解释：网页加载的时候会执行settable()。从而使得第一下拉框（id为table）变成<select id="date" name="date">
<option value="">请选择</option> <option value="t_01">aaa</option>
<option value="t_02">bbb</option>
</select>选择时触发setdata（）。问题：如果我选择aaa,触发 setdata（）后，函数setdata(d)中d的值为t_01.这时候。我如何根据这个d的值从date中取出t_01的数据。简单的来说。当我选择aaa。那么第二个下拉框为<select id="date" name="date">
<option value="">请选择</option> <option value="111">000</option>
<option value="333">222</option>
</select>当我选择bbb的时候。第二个下拉框为<select id="date" name="date">
<option value="">请选择</option> <option value="555">444</option>
<option value="777">666</option>
</select>就是根据不同的变量来选择不同的数据。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示摄像机</title>
<script type="text/javascript">
var table=[{name:"aaa",code:"t_01"},{name:"bbb",code:"t_02"}]
var date = {"t_01":[{name:"000",code:"111"},{name:"222",code:"333"}],"t_02":[{name:"444",code:"555"},{name:"666",code:"777"}]}
function settable()
{
var content = document.getElementById("table");
for(var i=0;i<table.length;i++)
{
var p=table[i];
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(p.name));
oOption.setAttribute("value", p.code);
content.appendChild(oOption);
//content.add(new Option(p.name,p.code));
}
}
function setdata(d)
{
var content = document.getElementById("date");
content.length="";
var _text = document.createTextNode("请选择");
var _option = document.createElement("option");
_option.appendChild(_text);
content.appendChild(_option);
for(var i=0;i<date[d].length;i++)
{
var new_option = document.createElement("option");
new_option.setAttribute("value",date[d][i].code);
var new_text = document.createTextNode(date[d][i].name);
new_option.appendChild(new_text);
content.appendChild(new_option);
}
}
</script> </head> <body onload="settable();">
<br /><br />
<table align="center" border="0" cellpadding="5" cellspacing="0" width="100%" style="border:1px #0099FF solid">
<tr>
<td align="right"><span style="padding-right:5px;">选择功能：</span></td>
<td align="left">
<span style="padding-left:2px;">
<select id="table" name="table" onchange="setdata(this.value)">
<option value="">请选择</option>
</select>
<select id="date" name="date">
<option value="">请选择</option>
</select>
</span>
</td>
</tr>
<tr><td height="5" colspan="2"></td></tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提 交" style="width:60px; height:22px;"> </td>
</tr>
</table>
</body></html>