如何從下拉列表中獲取所選值並將其過濾到sql查詢

Question

我有兩個下拉列表框，第一個是銷售區域包含從cookie獲取的不同種類的字母表，第二個下拉工作人員名稱是根據從第一個下拉列表中選擇值。我如何設法將選定的選項值傳遞給我的sql查詢，以便可以根據選定的銷售區域進行更改。 This is the results that i want to get我將我的代碼插入代碼片段以方便編輯和演示。

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

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

 

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

（updateleave.php）

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

$項= $ _ 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); 
    } 
?> 

Answer 1

使用append來添加的選項標籤與在選擇標籤也做了首次下降的變化情況下，所有的工作下來（「#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); 
} 
}); 
}); 
}); 

Answer 2

我不是jQuery的的粉絲，所以你需要我的JavaScript轉換成您的需求，但你需要的是捕捉下來的首次下降的onchange事件，並用它來動態過程第二個下拉列表的SQL。

<script> 
document.getElementById('area').onclick = function(){ 
    var xmlhttp; 
    var formData = new FormData(); 
    formData.append('area_value', this.value); 
    if(window.XMLHttpRequest){ 
      xmlhttp=new XMLHttpRequest(); 
    } else { 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
      if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
alert(xmlhttp.responseText); // for DEBUGGING. 
        if(xmlhttp.responseText == 'false'){ 
          alert(xmlhttp.responseText); 
        } else { 
          document.getElementById('slct2').innerHTML = xmlhttp.responseText; 
        } 
      } 
    } 
    xmlhttp.open("POST", 'build_slct2.php'); 
    xmlhttp.send(formData); 
    xmlhttp.onerror = function() { console.error(xmlhttp.statusText); } 
} 
</script> 

的build_slct2.php腳本將使用$_POST['area_value']創建所需的SQL查詢，處理查詢，並構建​​3210名單將在slct2下降結束了。 build_slct2.php文件只是echo的新內容slct2。