検索を実行したところ、同じ質問がある人がいるthis pageが見つかりました。ユーザーがessentialという名前のユーザーから応答があります。彼は明らかなアプローチ、AJAXを取っているようで、元の質問者はそれがトリックだと思ったようでした。あなたのページにAJAXを使用して好む場合
これを達成することができます。
応答は次のようになります。基本的な情報を得るために、簡単なデモをご紹介します。
この例では、スクリプト全体を保持する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>
そして、これは非AJAXyのアプローチがちょうど同じページ上のすべてを読み込むことであろうtherequest.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>
、なぜそれを自分でやろう、そしてあなたが立ち往生したときに聞いていませんか？また、この「トリプルドロップダウン」はどのように機能しますか？ –
私は現在、PHPとMySQLの学習に焦点を当てているので、JavaScriptには興味がありませんが、私はそれを継続する必要があります。主な質問にどのように作用するのか説明しました。 –
「どのように動作するのか」という私の質問は、それぞれのドロップダウンに何があるべきかを理解していないという事実に関連しています。最初のドロップダウンから何かを選択したことに応答して、最初に何が選択され、何が2番目に表示されるべきか。そして、同様に、2番目に選択をした後、3番目に表示されるべきものは..？ –