我创建了两个下拉列表，其中填充了使用ajax和php函数从mysql数据库获取的数据，第二个下拉列表依赖于第一个下拉列表并显示相关数据。我将两个下拉列表以表格单元格格式相邻放置。我使用 javascript 动态添加行，下拉元素获取得很好，但我无法获取与其相邻的下拉列表的相关选项。
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<script src="js/jquery.min.js"></script>
<script src="js/add_table.js"></script>
<script src="js/jquery.autocomplete.js"></script>
<script src="js/jquery.min.js"></script>
<SCRIPT language="javascript">
var xmlhttp;
function ajaxFunction(url,myReadyStateFunc)
{
if (window.XMLHttpRequest)
{
// For IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// For IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange= myReadyStateFunc; // myReadyStateFunc = function
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function getdgl(x)
{
// in second argument of ajaxFunction we are passing whole function.
// Goto getCity.php code
ajaxFunction("getdgl.php?did="+x, function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var d = xmlhttp.responseText;
d=d.split("|");
did = d[0].split(",");
dval = d[1].split(",");
//rowCount = el.find('#dds').html();
//dt1 = document.getElementsByName("dgld[]");
//window.alert(rowCount);
dt = document.getElementsByClassName('dgld')[0];
dt.innerHTML=dval.join()
dt.length=0
for(i=0;i<did.length-1;i++)
{
dt[i] = new Option(dval,did[i])
//dval = dval[i].join(" ");
}
}
});
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id = "input" + rowCount ;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
newcell.childNodes[0].id = "checkbox" + rowCount ;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
newcell.childNodes[0].I = "select" ;
//dt = document.getElementsByClassName('dgld')[i];
break;
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<div id = "dds">
<TABLE id="dataTable" width="350px" border="1">
<tr><td><select name="dgl" class="dgl" onchange="getdgl(this.value)">
<option value="-1">Select Datagroup</option>
<?php
$link = mysql_connect("localhost","root","AMITYADMIN");
$dbSelected = mysql_select_db('cosmic_d');
$dgl1 = mysql_query("SELECT * FROM datagrp_l");
while($row = mysql_fetch_assoc($dgl1))
{
echo '<option value="'.$row['dgl'].'">'.$row['Cri'].'</option>';
}
?>
</select>
</td>
<td><select name="dgld" class="dgld">
<option value="-1">Select dd</option>
</select></td>
</tr>
</TABLE>
</div>
</BODY>
</HTML>
最佳答案
我使用本教程来完成此操作。真是一种享受!
http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/
关于javascript - 无法通过 php 和 ajax 从数据库中检索下拉菜单的详细信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21496001/