图片说明](https://img-ask.csdn.net/upload/201603/22/1458634237_360971.png)
大家看图也能明白我的意思。页面中包含两个框架，下面的框架就是主要的问题所在。两个下拉列表联动已经会做了，现在想要点击“确定”后提交表单并在下面显示出数据库查询结果，但同时下拉列表不能刷新，保持选择的项目状态。目前点击按钮后会出现第二图的情况，恶心死我了。
我参考Shelley Powershot的《JavaScript学习指南》，可是却没能达到我想要的效果。提交表单是大概只能用post方法了吧……求大神相助，可以提供思路，提供参考文献或者指正我的代码
sd_help.php如下：
<!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" />
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body class="font">
<div align="center"><font size="4px">选择您需要的帮助</font></div><br>
<form name="search" action="search_db.php" method="post">
<div align="center">
<select name="domain" id="domain" onChange="redirec(document.search.domain.options.selectedIndex)">
<option selected value="0">请选择</option>
<option value="1">体育</option>
<option value="2">艺术</option>
<option value="3">文史</option>
</select>
<select name="items" id="items">
<option value="0" selected>请选择</option>
</select>
<input type="submit" value="确定" id="submitButton"/>
</form>
</div>
<script language="javascript">
//获取一级菜单长度
var groups = document.search.domain.options.length;
var group = new Array(groups);
//把一级菜单都设为数组
for (i=0; i<groups; i++)
{ group[i] = new Array();}
//定义基本选项
group[0][0] = new Option("请选择", "0");
group[1][0] = new Option("足球", "1");
group[1][1] = new Option("篮球", "2");
group[1][2] = new Option("乒乓球", "3");
group[2][0] = new Option("歌唱", "4");
group[2][1] = new Option("舞蹈", "5");
group[2][2] = new Option("乐器", "6");
group[3][0] = new Option("小说", "7");
group[3][1] = new Option("散文", "8");
group[3][2] = new Option("诗词", "9");
//联动函数
function redirec(x)
{
var temp = document.search.items;
for (i=0;i<group[x].length;i++)
{ temp.options[i]=new Option(group[x][i].text,group[x][i].value);}
temp.options[0].selected=true;
}
//<![CDATA[
//全局变量
var xmlHttpObj;
function catchEvent(eventObj,event,eventHandler){
if(eventObj.addEventListener){
eventObj.addEventListener(event,eventHandler,false);
}else if(eventObj.attachEvent){
event="on"+event;
eventObj.attachEvent(event,eventHandler);
}
}
catchEvent(window,"load",function(){
//document.getElementById("helps").style.display="block";
document.getElementById("items").onchange=populateList;
//document.getElementById("submitButton").style.display="none";
});
//创建XHR对象
function getXmlHttp(){
var xmlhttp=null;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType('text/html');
}
}else if(window.ActiveObject){
xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
//准备并发送XHR请求
function populateList(){
var items=document.getElementById("items").value;
var url='search_db.php';
var qry="items="+items;
//如果xmlHttpObj为空
if(!xmlHttpObj)
xmlHttpObj=getXmlHttp();
if(!xmlHttpObj) return;
xmlhttp.open('POST',url,true);
xmlhttp.onreadystatechange=getItems;
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(qry);
}
//处理返回的数据
function getItems(){
if(xmlHttpObj.readyState==4&&xmlHttpObj.status==200){
document.getElementById('helps').innerHTML=xmlHttpObj.responseText;
}else if(xmlHttpObj.readyState==4&&xmlHttpObj.status!=200){
document.getElementById('helps').innerHTML='请求出错误！';
}
}
//]]>
</script>
<div align="center">
<table><tr><td id="helps"></td></tr></table>
</div>
</body>
search_db.php如下（暂为演示，所以没有执行数据库查询）：
<?php
if(empty($_QUEST['items'])){
echo "未传入items值！悲剧！";
} else echo ($_QUEST['items']);
?>
