这有点复杂,所以请耐心等待:
在FORM.php上,我有两个下拉菜单:
设备类型
下拉菜单,允许用户选择设备类型。
Plant子类型
下拉菜单,通过AJAX和对数据库的调用为Plant子类型提供多种选择。
AJAX代码:
<script type="text/javascript">
function getXMLHTTP() {
var xmlhttp = false;
try {
xmlhttp = new XMLHttpRequest();
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e1) {
xmlhttp = false;
}
}
}
return xmlhttp;
}
function getPlantSubtype(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById( plant_subtype_div ).innerHTML = req.responseText;
} else {
alert("There was a problem while using XMLHTTP:
" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
这非常有效,当我提交时,值会保存在DB中,并显示在表单下面的表中。
现在用户想要编辑这个条目,点击带有信息的表格单元格旁边的编辑。
设备类型和设备子类型的值通过$_POST
传递到EDIT.php。
EDIT.php代码(使用Smarty标记):
<select name="plant_type" onchange="getPlantSubtype( plant_subtype.php?plant_type= +this.value)">
<option selected="selected" value="{$plant_type}">
{$plant_type}
</option>
<option value="" disabled="disabled">
---
</option>
<option value="1">
Tomato
</option>
<option value="2">
Carrot
</option>
</select>
<div id="plant_subtype_div">
<select name="plant_subtype">
<option selected="selected" value="{$plant_subtype}">
{$plant_subtype}
</option>
<option value="" disabled="disabled">
---
</option>
</select>
</div>
在EDIT.php上,两个下拉菜单都显示正确的值。
但是,当我单击Plant子类型
下拉菜单时,多项选择不可用。
这是因为表单已经预先填充了$_POST
,而onChange
尚未发生。
加载EDIT.php时,如何使Plant子类型
下拉菜单显示其选择?