我有三个下拉列表，标记为主题选择1，主题选择2和主题选择3。网页加载时仅填充第一个主题列表。如何在更改第一个列表时填充第二个列表，在更改第二个列表时填充第三个列表？另一个要求是，要填充的每个列表应该是互斥的。
让我们举个例子：最初第二个列表和第三个列表是无效的。假设第一个列表包含：
- 孟加拉语
- 英语
- 数学
- 物理
- 化学
现在用户选择说 3）数学，那么第二个列表将是
- 孟加拉语
- 英语
- 物理
- 化学
这次如果用户选择说 2），那么第三个列表将是
- 孟加拉语
- 物理
- 化学
如果绝对需要，我正在寻找使用纯JavaScript或jQuery完成的整个事情，但没有数据库交互。
<!-- javascript code for dynamic dropmenu For Hons 2 Subject -->
function AjaxFunctionHonsSub2(hons_sub_id2)
{
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateck()
{
if(httpxml.readyState==4)
{
var myarray=eval(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for(j=document.applicationform.hons_pref_sub3.options.length-1;j>=0;j--)
{
document.applicationform.hons_pref_sub3.remove(j);
}
// add option for subject 3
var index=0;
var optn2 = document.createElement("OPTION");
optn2.value = '19';
optn2.text = '------SELECT------';
document.applicationform.hons_pref_sub3.options.add(optn2);
for (i=0;i<myarray.length;i++)
{
if(index<myarray.length){
var optn = document.createElement("OPTION");
optn.value = myarray[index];
optn.text = myarray[index+1];
document.applicationform.hons_pref_sub3.options.add(optn);
index+=2;
}
}
}
}
var url="fetch_hons_subject.php";
url=url+"?hons_sub_id="+hons_sub_id2;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
}
<!--# end javascript code for dynamic dropmenu ======================================================================-->
请参阅以下代码。这不是一个非常优雅的方法，但它工作正常。我已经为第二个下拉列表实现了它，您也可以为第三个下拉列表实现类似的内容。
<html>
<head>
<script>
function changeDD2()
{
var ddTemp = document.getElementById('mydropdown');
var dd2Temp = document.getElementById('mydropdown2');
var ddSelectedIndex = ddTemp.selectedIndex;
if(ddSelectedIndex==0)
{
alert("Please select valid input");
return;
}
else
{
for(var i=1;i<ddTemp.length;i++)
{
if(i!=ddSelectedIndex)
{
var opt = ddTemp[i];
var el = document.createElement("option");
el.textContent = opt.text;
el.value = opt.value;
dd2Temp.appendChild(el);
}
}
}
}
</script>
</head>
<body>
<select id="mydropdown" name = "mydropdown" onChange="changeDD2()">
<option>None</option>
<option>Maths</option>
<option>Bio</option>
<option>Physics</option>
<option>Chemistry</option>
</select>
<select id="mydropdown2" name = "mydropdown2">
</select>
<select id="mydropdown3" name = "mydropdown3">
</select>
</body>
</html>
很多东西可以在这里通用/动态驱动，避免使用硬代码。
希望这有帮助