這是一個有點複雜,所以忍耐一下:AJAX預填充下拉菜單
在form.php的,我有2個下拉菜單:
Plant type
下拉,允許用戶選擇「植物類型「。
Plant sub-type
下拉是通過AJAX和數據庫的調用提出了「植物分型的多元選擇。
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:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
完美的作品,當我提出,值將保存在數據庫和表格下面的表格所示。
現在用戶想要編輯該條目,單擊帶有info的表格單元格旁邊的'Edit'。
值「設備類型」和「植物子類型」通過$_POST
傳遞給EDIT.php。 (使用Smarty的標籤)
EDIT.php代碼:
<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 sub-type
下拉多選項不可用。
這是因爲表單已經預先填入$_POST
而onChange
尚未發生。
如何使Plant sub-type
下拉顯示其選擇加載EDIT.php什麼時候?
混戰師 - 不幸的是,沒有工作 - 我認爲這個問題是您發送的代碼仍然掛`onChange` - 我們怎麼把它弄出來的存在,並且鏈接到頁面加載? – pepe 2011-02-13 16:33:46