first of all this code works like a charm, my question is to add a feature. I would like to know how can I populate next drop down based on selection. so for example I select first stock 'US500' and it would show me prices on second drop-down. how can I do this?
data.php
<?php
if(!empty($_GET['getlist']))
{
$list = $_GET['getlist'];
$qry='';
switch($list)
{
case 'tracks':
{
$qry = "SELECT TABLE_NAME as allStocks FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = 'db_stocks' AND TABLE_ROWS > 100";
break;
}
}
if(empty($qry)){ echo "invalid params! "; exit; }
$dbconn = mysql_connect('localhost','user','pass')
or die("DB login failed!");
mysql_select_db('db_nadex_stocks', $dbconn)
or die("Database does not exist! ".mysql_error($dbconn));
$result = mysql_query($qry,$dbconn)
or die("Query $qry failed! ".mysql_error($dbconn));
$rows = array();
while($rec = mysql_fetch_assoc($result))
{
$rows[] = $rec;
}
mysql_free_result($result);
mysql_close($dbconn);
echo json_encode($rows);
}
?>
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>List Sample 1</title>
<style>
body{ font-family : Arial, Helvetica, sans-serif; font-size : 1em;}
h1 {font-size : 18pt; color : #000066;}
h2 {font-size : 14pt; color : #000066;}
a:hover{text-decoration : none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function loadlist(selobj,url,nameattr) {
$(selobj).empty();
$.getJSON(url,{},function(data)
{
$.each(data, function(i,obj)
{
$(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
});
});
}
$(function() {
loadlist($('select#sel1').get(0), 'data.php?getlist=tracks','allStocks');
loadlist($('select#sel2').get(0), 'data.php?getlist=tracks','allStocks');
loadlist($('select#sel3').get(0), 'data.php?getlist=tracks','allStocks');
});
</script>
</head>
<body>
<h1>Dynamically lists: multiple lists</h1>
<p>
dfgdgf 1:<select name='sdfsdf' id='sel1' size='1'></select>
</p>
<p>
cvbcvb 2:<select name='sdfsdf' id='sel2' size='1'></select>
</p>
<p>
cvbcv 3:<select name='dfgdfg' id='sel3' size='1'></select>
</p>
</body>
</html>
