动态下拉列表

时间:2015-06-13 05:10:18

标签: php html mysql

  1. 受试者
  2. 当然
  3. 章节
  4. 我想添加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>
    

2 个答案:

答案 0 :(得分:1)

如果您的数据集相对较小,那么一种可能的解决方案就是。在页面加载时加载所有数据,并使用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>

答案 1 :(得分:1)

创建动态下拉列表的最简单方法是在head标记内使用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;
?>