CODEWITHSUNDEEP
phpjavascriptmysqldynamicdrop-down-menu
pikk
pikk

Reputation: 525

How can we dynamically change a few dropdown lists using a database?

Trying to dynamically change dropdown list values from mysql database. Script seems like workin but I'm not sure. The database columns are id, columnA, columnB, columnC, columnD

On second dropdown-list selection, it gives the alert 'hi again'. 

$(document).ready(
function() {
$(".columnA").change(
function() {
    var dataA=$(this).val();
    var dataString = 'columnA='+ dataA;
    $.ajax (    {
                    type: "POST",
                    url: "ajax_try.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        $(".columnB").html(html);
                    }    
                }               
            );

            }
    );

$(".columnB").change(
function() {
    var dataB=$(this).val();
    var dataString = 'columnB='+ dataB;
    $.ajax (    {
                    type: "POST",
                    url: "ajax_try.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        alert("hi.. again");
                        $(".columnC").html(html);
                    }    
                }               
            );

            }
    );

});

<?php
include('db.php');
if($_POST['columnA'])
{
$columnA = $_POST['columnA'];

$sql = mysql_query("SELECT id, columnB FROM try WHERE columnA = '$columnA' GROUP BY columnB");

//$sql = mysql_query("SELECT id, columnB FROM try columnB WHERE columnA = '$columnA'");

while($row = mysql_fetch_array($sql))
{
$id = $row['id'];
$columnB = $row['columnB'];
echo '<option value="'.$id.'">'.$columnB.'</option>';

}
}


if($_POST['columnB'])
{
$columnB = $_POST['columnB'];

$sql = mysql_query("SELECT id, columnC FROM try WHERE columnB = '$columnB' GROUP BY columnC");

while($row = mysql_fetch_array($sql))
{
$id = $row['id'];
$columnC = $row['columnC'];
echo '<option value="'.$id.'">'.$columnC.'</option>';

}
}

?>

Ok I think html code make it easier to understand the problem.. 

<html xmlns="http://www.w3.org/1999/xhtml">
....
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
.....
here is the script
...
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="10">
  <tr>
    <td width="15%"><span style="font-size:20px;">columnA</span></td>
    <td><span >
        <select size="1" id="columnA" title="" name="columnA" class="columnA"  style="width:250px; height:40px; font-size:20px; padding: 5px;">
            <option value="0" selected="selected">Choose..</option>
        <?php
            include('db.php');
            $sql=mysql_query("SELECT columnA FROM try GROUP BY columnA");
            while($row = mysql_fetch_array($sql))
            {
            //$id = $row['id'];
            $dataA = $row['columnA'];
            echo '<option value="'.$dataA.'">'.$dataA.'</option>';
            } 
        ?>
        </select>
        </span>
    </td>
  </tr>
  <tr>
     <td width="15%"><span style="font-size:20px;">columnB</span></td>
    <td>
        <select size="1" id="columnB"  title="" name="columnB" class="columnB" style="width:250px; height:40px; font-size:20px; padding: 5px;">
            <option value="0" selected="selected">Choose..</option>
        </select>
    </td>
  </tr>
  <tr>
     <td width="15%"><span style="font-size:20px;">columnC</span></td>
    <td>
        <select size="1" id="columnC"  title="" name="columnC" class="columnC" style="width:250px; height:40px; font-size:20px; padding: 5px;">
            <option value="0" selected="selected">Choose..</option>
        </select>
    </td>
  </tr>


</table>
</body>
</html>

Upvotes: 0

Views: 2139

Answers (2)

SativaNL
SativaNL

Reputation: 541

while($row = mysql_fetch_array($sql)) {
   $id = $row['id'];
   $columnC = $row['columnC'];
   echo '<option value="'.$id.'">'.$columnC.'</option>';
}

You're printing columnB, while you should print columnC

Upvotes: 1

Martin Bean
Martin Bean

Reputation: 39409

I'd be tempted to just select all the rows from your table in one query, and then use JavaScript (or jQuery) to change the select list options. This saves HTTP requests, as for each change your firing an AJAX event, and if the user changes the option 100 times, that's 100 requests just for aesthetic reasons.

Another benefit is, if the user for some reason doesn't have JavaScript or is on a slow connection, then the select lists are still usable, as otherwise they'll be blank because they haven't been loaded by your AJAX call.

Upvotes: 1

Related Questions