Question

我有2个表（分别是登录表和主题表）。输入字段具有会话用户的id（来自登录表），而第一个下拉列表包含分配给他/她的所有类（来自主题表）。如果可能的话，如何使用ajax将分配给每个类的所有主题收集到仍然来自主题表的第二个下拉列表中。注意:(主题表有类，主题，staffid）。下面是我的代码：

<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

嗨＆amp;欢迎来到stackoverflow。我只是假设你知道在服务器端做什么来获取主题，并告诉你如何使用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>

如果您有任何问题，请与我们联系。

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

1 个答案: