如何使用輸入字段值和另一個下拉列表值將記錄獲取到下拉列表

Question

我有2個表（分別是登錄表和主題表）。輸入字段具有會話用戶的ID（來自登錄表），而第一個下拉列表包含分配給他/她的所有類（來自主題表）。如果可能的話，我怎樣才能將所有分配給每個類的主題收集到第二個下拉列表中，然後從主題表中使用ajax。注:(主題表有課程，科目，職員）。下面是我的代碼：

<td class="header">TEACHER ID:</td> 
<td> 
<label> 
<input type="text" name="staffid" class="input_txt" id="teachID" value=" 
<?php echo $staffDetails->staffID; ?>"></label> 
</td> 
<td class="header">CLASS:</td> 
<td> 
    <select name="txtclassname" class="input_txt" id="class"> 
     <option value="">-- Select Class --</option> 
<?php 
$staff = $staffDetails->staffID; 
$stmt = $db->prepare("SELECT distinct className FROM subjects WHERE staffID = :sid"); 
$stmt->execute(array("sid"=>$staff)); 
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
{ 
    ?> 
<option value=""><?php echo $row['className']; ?></option> 
<?php 
} 
?> 
</select> 
</td> 
<td class="header">SUBJECTS:</td> 
    <td> 
<!--I need all the subjects for a chosen class here--> 
     <select name="txtclassname" class="input_txt" id="class"> 
      <option value="">--</option> 
     </select> 
    </td> 

修改後的JavaScript代碼：

<script type="text/javascript"> 
$(document).on('change', '#staffclass', function(){ 
    if($(this).val() !==""){ 
     $.ajax('get_staffSubjects.php?staffclass='+ $(this).val()).done(function(jsonOrHtml)){ 
      var JSON = JSON.parse(jsonOrHtml); 
      var subjectSelect = $('#subject'); 
      subjectSelect.html('<option value="">--Select Subject--</option>'); 
      for(var i=0; i<json.length; i++){ 
       subjectSelect.append('<option value="">'+json[i]+'</option>'); 
      } 
     }); 
    } 
); 
</script> 

我的服務器端腳本（名爲：get_staffSubjects.php）

<?php 
require_once 'myConn.php'; 
require_once 'session.php'; 
$db = getDB(); 

if(($_POST['staffclass']) & ($_POST['teachID'])) 
{ 
$staff = $_POST['teachID']; 
$subs = $_POST['staffclass'];  
$stmt = $db->prepare("SELECT * FROM subjects WHERE className=:staffclass AND staffID=:teachID"); 
$stmt->execute(array('id'=>$subs, 'teachID'=>$staff)); 
?> 
<option value="">Select Subject:</option> 
<?php 
while($row=$stmt->fetch(PDO::FETCH_ASSOC)) 
{ 
?> 
<option value=""><?php echo $row['subName']; ?></option> 
<?php 
} 
} 
?> 

Answer 1

喜&歡迎計算器。我只是假設你知道在服務器端要做什麼來獲取主題，並告訴你如何使用jQuery來通過Ajax獲取它們。

<td class="header">TEACHER ID:</td> 
<td> 
    <label> 
     <input type="text" name="staffid" class="input_txt" id="teachID" value="<?php echo $staffDetails->staffID; ?>"> 
    </label> 
</td> 
<td class="header">CLASS:</td> 
<td> 
    <select name="txtclassname" class="input_txt" id="class"> 
     <option value="">-- Select Class --</option> 
<?php 
$staff = $staffDetails->staffID; 
$stmt = $db->prepare("SELECT distinct className FROM subjects WHERE staffID = :sid"); 
$stmt->execute(array("sid"=>$staff)); 
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
{ 
    ?> 
    <option value=""><?php echo $row['className']; ?></option> 
<?php 
} 
?> 
    </select> 
</td> 
<td class="header">SUBJECTS:</td> 
<td> 
<!--Notice that I've changed the name and id of this drop-down, as I expect you need those to be unique --> 
    <select name="txtsubject" class="input_txt" id="subject"> 
     <option value="">--Select Subject--</option> 
    </select> 
</td> 
<script type="text/javascript"> 
    //I'm using jquery, which is a quick solution 
    //NB: I don't like that the id='class', better use some other name 
$(document).ready(function(){ // this ensure the code below happens after page is fully loaded 
    $(document).on('change', '#class', function(){ 
     if($(this).val()!==""){ 
      $.ajax('get_staffSubjects.php?staffclass='+ $(this).val()).done(function(html){ 

       var subjectSelect = $('#subject'); 
       //since html is constructed on the server side, we'll just append the response to the drop-down 
       subjectSelect.html(html); 
      }); 
     } 
    }); 
}); 
</script> 

讓我知道如果您有任何問題。