I created two dropdown which is filled with data fetched from mysql database by using the ajax and php function, Second dropdown is dependent on the first one and show relevant data. I placed both dropdown in adjacent to one another in table cell format. For the first row the dropdown elements fetched and it also shows relevant option to adjacent cells but while
<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>
I dynamically add row by using javascript, dropdown elements fetched well but I cannot fetch relevant option to dropdown which is adjacent of it.