動態下拉列表

Question

1. 科目
2. 當然
3. 章

我要添加2個動態下拉列表，一個是主體，一個是用於課程。當我選擇科目時，添加到該科目的課程應加載到課程下拉列表中，然後向該課程添加章節。

我該怎麼做？

任何幫助，將不勝感激。

這裏是我的代碼：

<div class="content-form-inner"> 

     <div id="page-heading">Enter the details</div> 
     <div class="form_loader" id="thisFormLoader"></div> 
     <div id="error_message"></div> 
     <form name="thisForm" id="thisForm" action="editchapters.php?mode=<?php echo $_REQUEST['mode']; ?>&id=<?php echo $id; ?>" method="post" enctype="multipart/form-data"> 
      <table border="0" cellpadding="0" cellspacing="0" id="id-form" > 
       <tr> 
         <th valign="top" style="width:0%"><span class="required">*</span>Subject</th> 
         <td style="width: 0%"> 
         <select name="subject_name" class="select-form required " style="color:#000 !important;width:200px !important"> 
         <option value="">Select</option> 
         <?php 
          $sql = "select * from mock_subject "; 
          $res = mysqli_query($dbhandle,$sql); 
          $numrows =mysqli_num_rows($res); 
          echo mysql_error(); 

          if($numrows){ 

           while($obj = mysqli_fetch_object($res)){ 

            if($obj->status == 1){ 

             if($subject == $obj->id){ 
              echo '<option value="'.$obj->id.'" selected>'.($obj->subject_name).'</option>'; 
             } 
             else{ 
              echo '<option value="'.$obj->id.'">'.($obj->subject_name).'</option>'; 
             } 
            } 
           } 
          } 
         ?> 
         </select> 
         </td> 

         <td style="width: 0%;"> 
          <div id="subject_id-error" class="error-inner"></div> 
         </td> 
         <td></td> 
       </tr> 

       <tr> 
        <th valign="top" style="width:0%"><span class="required">*</span>Course</th> 
        <td style="width: 0%"> 
         <select name="course_name" class="select-form required " style="color:#000 !important;width:200px !important"> 
          <option value="">Select</option> 
          <?php 
           $sql = "select * from mock_course "; 
           $res = mysqli_query($dbhandle,$sql); 
           $numrows =mysqli_num_rows($res); 
           echo mysql_error(); 

           if($numrows){ 

            while($obj = mysqli_fetch_object($res)){ 

             if($obj->status == 1){ 

              if($course == $obj->id){ 
               echo '<option value="'.$obj->id.'" selected>'.($obj->course_name).'</option>'; 
              } 
              else{ 
               echo '<option value="'.$obj->id.'">'.($obj->course_name).'</option>'; 
              } 
             } 
            } 
           } 
          ?> 
         </select> 
        </td> 

        <td style="width: 0%;"> 
         <div id="course_id-error" class="error-inner"></div> 
        </td> 
        <td></td> 
       </tr> 

       <tr> 
        <th><span class="required">*</span>Chapter</th> 
        <td><input type="text" name="chapter_name" class="inp-form required" value="<?php echo $chapter;?>" style="color:#000 !important;"></td> 
        <td> 
        <div></div> 
        </td> 
       </tr> 

       <tr> 
        <th>&nbsp;</th> 
        <td valign="top"><input type="submit" name="submit_button" value="<?php echo $mode=="edit"? "Update" : "Add" ?>" class="form-submit" /> 
        <input type="reset" value="Reset" class="form-reset" /> 
       </tr> 
      </table> 
     </form> 
     <div class="clear"></div> 
    </div> 

Answer 1

創建動態下拉的最簡單方法是通過內部使用jquery頭標籤。
給onchange()事件並使用jQuery代碼將數據引導到另一個頁面，然後鏈接2個下拉列表。我所做的代碼就是這樣，我覺得這是動態下拉最簡單的方法。

我包括

jQuery是

<script> 
    function ajaxDrp(data){ 
    $.ajax({ 
     method: "POST", 
     url: "chapterDropdown.php", 
     data: { 
     id: data 
     } 
    }).success(function(data) { 
     $('#selectCourse').empty(); 
     $('#selectCourse').append(data); 
    }); 
    } 
</script> 

#selectCourse是我給到必須在同步與第一下拉其它下拉的ID。

jQuery中給定的url是第一個下拉列表數據收集的路徑。在我的情況下，代碼是這樣的：

<?php 

    $id = $_REQUEST['id']; 
    $query = "SELECT * FROM `your table name` WHERE subject_id = " . $id; 
    $result = mysqli_query($dbhandle,$query); 
    $count = 0; 
    $option`enter code here` = ''; 
    while($row = mysqli_fetch_assoc($result)) { 
    $option .= '<option 
    value="'.$row['id'].'">'.$row['course_name'].'</option>'; 
    } 
    echo $option; 
?> 

Answer 2

一個可行的辦法，如果你的數據集是比較小的。加載頁面加載的所有數據，並使用jquery獲取下拉值，並基於此制定其他下拉列表的值。 第二個解決方案將是我們的AJAX並從您的數據庫中調用每個動作的數據。並使用Angular進行打印。 我附上了一個示例代碼。 這是my_script.js

var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
    $(document).ready(function(){ 
    callSetTimeout();  
}); 

function callSetTimeout(){ 
    setTimeout(function(){ 
     update(); 
     callSetTimeout(); 
    },200); 
} 

function update(){ 
    $http.get("http://localhost/WhatsOnYourMInd/db.php") 
      .success(function (response) {$scope.names = response.records;}); 
        } 
}); 

這是db.php中

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "mind"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = "SELECT * FROM data"; 
$result = $conn->query($sql); 
$jsonString=array(); 
if ($result->num_rows > 0) { 
    // output data of each row 
    while($row = $result->fetch_assoc()) { 
     array_push($jsonString,array('id' =>$row['id'],'name' =>$row['name'],'message' =>$row['message'])); 

    } 
    echo json_encode(array("records"=>$jsonString)); 
} else { 
    echo "0 results"; 
} 
$conn->close(); 
?> 

這是index.html的

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Whats on your Mind</title> 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

</head> 
<body> 
<ul id="ajax"></ul> 

<div ng-app="myApp" ng-controller="customersCtrl"> 

    <ol> 
     <li ng-repeat="x in names"> 
      {{ 'Id:'+x.id + ' Name:' + x.name +' Message:'+x.message}} 
     </li> 
    </ol> 

</div> 
<script src="my_script.js"></script> 
</body> 
</html>