如何使用输入字段值和另一个下拉列表值将记录获取到下拉列表

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> 

让我知道如果您有任何问题。