Javascript 使用Ajax填充多个选择下拉列表

我正在尝试使用ajax填充我的多个下拉列表。但它不起作用。此下拉列表依赖于另一个下拉列表，即单选下拉列表。 Html代码是：

 <div class="form-group">
        <label for="InputGender">Select Course</label>
        <div class="input-group">
        <select class="form-control" name="sub_id"  id="sub_id">
            <option value="">Select Course Name</option>
            <?php
              while ($row = $result->fetch_row()) {
             ?> 
            <option value="<?php echo $row[0]; ?>"><?php echo $row[1]; ?></option>
              <?php } ?>
        </select>
         <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span> 
       </div> 
    </div>
    <div class="form-group">
   <label>Second Level Category</label><br />
   <select id="chap_id" name="chap_id[]" multiple class="form-control">

   </select>
   </div>

选课
选择课程名称
我不知道PHP部分代码，但我已经尝试过了。只是一个例子，你在这里做什么，它是完美的工作

<div class="form-group">
    <label for="InputGender">Select Course</label>
    <div class="input-group">
        <select class="form-control" name="sub_id" id="sub_id">
            <option value="">Select Course Name</option>
            <option value="1">1</option>
        </select>
        <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
    </div>
</div>
<div class="form-group">
    <label>Second Level Category</label>
    <br />
    <select id="chap_id" name="chap_id[]" multiple class="form-control">

    </select>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {

        $("#sub_id").change(function() {
            var response = [{
                id: 1,
                name: 'a'
            }, {
                id: 2,
                name: 'b'
            }];
            for (var i = 0; i < response.length; i++) {
                var cid = response[i]['id'];
                var cname = response[i]['name'];
                $("#chap_id").append("<option value='" + cid + "'>" + cname + "</option>");

            }
        });

    });
</script>

然后，您可以在select picker中添加记录，具体问题是什么？不能使用完整部分或ajax？我猜问题主要是完全没有任何代码来填充第二个下拉列表，对吗？请将
AddQuestionAjax.php
代码添加到您的问题pl AddQuestionAjax代码谁投票支持这样的问题？请阅读鼠标悬停在向上投票箭头上方时显示的工具提示！那么，
cakephp
与这个问题有什么关系呢
 <?php
session_start();
require 'conn.php';

$tSubId = $_POST['subId'];   // department id
$sql = "SELECT * FROM chapter WHERE Subject_subId=".$tSubId;

$result = mysqli_query($con,$sql);

$sub_arr = array();

while( $row = mysqli_fetch_array($result) ){
$sid = $row['idChapter'];
$sname = $row['chapName'];

$sub_arr[] = array("id" => $sid, "name" => $sname);
}

// encoding array to json format*/
echo json_encode($sub_arr);
?>

<div class="form-group">
    <label for="InputGender">Select Course</label>
    <div class="input-group">
        <select class="form-control" name="sub_id" id="sub_id">
            <option value="">Select Course Name</option>
            <option value="1">1</option>
        </select>
        <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
    </div>
</div>
<div class="form-group">
    <label>Second Level Category</label>
    <br />
    <select id="chap_id" name="chap_id[]" multiple class="form-control">

    </select>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {

        $("#sub_id").change(function() {
            var response = [{
                id: 1,
                name: 'a'
            }, {
                id: 2,
                name: 'b'
            }];
            for (var i = 0; i < response.length; i++) {
                var cid = response[i]['id'];
                var cname = response[i]['name'];
                $("#chap_id").append("<option value='" + cid + "'>" + cname + "</option>");

            }
        });

    });
</script>

var res = JSON.parse(response);