Динамический выпадающий список

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 это идентификатор Я дал другому выпадающий список, которые должны быть синхронизированы с первым выпадающим меню.

Данный URL-адрес в jquery - это путь, по которому собираются данные первого выпадающего списка. В моем случае код выглядит так:

<?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 и вызывать данные из вашей базы данных для каждого действия. и печать с использованием углового. Я прикрепил образец кода для этого. Это 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>