如何从下拉列表中获取所选值并将其传递给sql查询

Question

i have two dropdown list box,first one is sales area contain different kind of alphabet which get from cookie,second dropdown staff name is to change according to the selected value from first dropdown. How can i manage to pass the selected option value to my sql query so that it can be change according to the selected sales area. This is the results that i want to get I insert my code to the snippet for easy to do edit and demonstration.

function fetch_select(val)
{
 $.ajax({
 type: 'post',
 url: 'updateleave.php',
 data: {
  get_option:val
 },
 success: function (response) {
  document.getElementById("slct2").innerHTML=response; 
 }
 });

<table >
    <tr>
        
        <td>  Sales Area 
        <select name="Area" id="area" >
        <?php
   
        $sarea = explode(",",$_COOKIE['cooAreaCode']);
        foreach($sarea as $item){
        
        ?>
        <option   value="<?php echo strtolower($item); ?>"><?php echo $item; ?></option>
        
        <?php
        
        }
   


 
        ?>
       
       </select >
       </td>
       <?
           $var = $_POST['Area'];
      $sql = "SELECT  StaffName FROM tblStaff WHERE AreaCode= '$var'";
      $rs = odbc_exec($link,$sql);
     while ($row = odbc_fetch_array($rs)) {
         $porr[] = $row;
       }
       
      odbc_free_result($rs);   
     odbc_close($link); 
     ?>
        <td>  Staff Name 
        <select id="slct2">
    
        ?>
       
       </select>
       
       </td>
       <label class="form_field">Your selected <span id="aggregator_name"></span></label>

(updateleave.php)

if (isset($_POST['get_option'])) {

$item=$_POST['get_option'];

  $sql = "SELECT  StaffName FROM tblStaff WHERE AreaCode= '$item'";
  $rs = odbc_exec($link,$sql);
 while ($row = odbc_fetch_array($rs)) {
     $porr[] = $row;
   }
    for($i=0; $i < count($porr);$i++) {
   echo "<option  value="strtolower($porr[$i]['StaffName']);" >" .$porr[$i]['StaffName']."</option>";
  odbc_free_result($rs);   
 odbc_close($link); 
    }
?>

</div>

Answer 1

Use append to add option tags with in select tag also do all the work in change event of the first drop down ("#area")

$(document).ready(function(){
$("#area").change(function()
{
var val =$(this).val();
 $.ajax({
 type: 'post',
 url: 'updateleave.php',
 data: {
  get_option:val
 },
 success: function (response) {
$("#clct2").append(response);
}
 });
});
});