CODEWITHSUNDEEP
phpjquery
XK8ER
XK8ER

Reputation: 780

Populate extra drop-down based on selection

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>

Upvotes: 0

Views: 133

Answers (1)

Wenzz
Wenzz

Reputation: 368

You will need to add in an onChange to the first dropdown and then send the selected index of the first dropdown to the same function. Something like this in the onChange.

loadlist($('select#sel2').get(0), 'data.php?getlist=prices&stock_id=' + $(this).val(),'allStocks');

And then add into the switch statement a check for 'prices' and query for the prices using the stock_id 

$_GET['stock_id']

Upvotes: 2

Related Questions