进行搜索时，我发现了这个页面，其中一个人的问题基本相同。有一个名为essential的用户的回复。他似乎采用了明显的方法，AJAX，而最初的提问者似乎认为它成功了。
响应如下：
如果您更喜欢在页面中使用 AJAX，则可以实现这一点。为了获得它的基本知识，这里有一个简单的演示。
这个例子有 2 个单独的 html 文档：main.html 包含整个脚本，request.html 包含另一个选项，将根据请求注入到 main.html。
这是 main.html 的代码：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Demo</title>
<script type="text/javascript">
// <![CDATA[
/* No editing required -
For demonstrational purposes only. */
// Declaring variables
var ajax, update, xmlData, getOptions;
var obj, select, option;
// This is a simple prototype that will skip the long declaration of ( element.getElementsByTagName( tagName )[reference] ).
// And now can be defined as element.obj( tagName, reference )
obj = Object.prototype.obj = function( tn, ref ) {
if (( tn ) && ( typeof ref === "number" ) && ( ref !== null )) {
return ( this.getElementsByTagName( tn )[ ref ] );
} else {
return ( this.getElementsByTagName( tn ));
}
};
// This is the function reference which is the one who handle's and process the request sent by the XMLHttpRequest object.
// And considered as the most important part of the whole program.
getOptions = function() {
select = xmlData.responseXML.obj("select", 0)
option = select.obj("option");
oLen = option.length;
for ( x = 0; x < oLen; x++ ) { document.obj("select")["lists"].remove( x );
document.obj("select")["lists"].add( new Option( option[x].childNodes[0].nodeValue, option[x].getAttribute("value") ), x );
}
};
ajax = function ( url ) {
xmlData = null;
if ( window.XMLHttpRequest ) {
xmlData = new XMLHttpRequest();
} else if ( window.ActiveXObject ) {
try {
xmlData = new ActiveXObject("Microsoft.XMLHTTP");
} catch( e ) {
xmlData = new ActiveXObject("Msxml2.XMLHTTP");
}
}
if ( xmlData !== null ) {
xmlData.onreadystatechange = getOptions;
xmlData.open("GET", url, true);
xmlData.send( null );
} else {
alert("\nYour browser does not support AJAX Request!");
}
};
update = function( sel ) {
sel = ( document.getElementById ) ? document.getElementById( sel ) : document.all.sel;
index = sel.selectedIndex;
ajax( sel.options[index].value );
return;
}
// ]]>
</script>
</head>
<body>
<div id="content">
<form id="ajaxForm" action="#" onsubmit="return false;">
<div>
<select id="lists" name="lists" size="1" onchange="update( this.id );">
<option value="">Default List</option>
<option value="">Default List</option>
<option value="">Defaut List</option>
<option value="request.html">AJAX Demo - Request Lists!</option>
</select>
</div>
</form>
</div>
</body>
</html>
这适用于request.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Request Page</title>
</head>
<body>
<div id="content">
<form id="frm" action="*" onsubmit="return false;">
<div>
<select id="sel" name="sel" size="1" onchange="ajax.listed(this.id);">
<option value="">Requested List</option>
<option value="">Requested List</option>
<option value="">Requested List</option>
<option value="main.html">AJAX Demo - Default Page!</option>
</select>
</div>
</form>
</div>
</body>
</html>