Question

我试图使用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>

Ajax代码是：

$(document).ready(function(){

    $("#sub_id").change(function(){
        var id = $(this).val();
        $.ajax({
            url: 'AddQuestionAjax.php',
            type: 'post',
            data: {subId:id},
            dataType: 'json',
            success:function(response){

                var len = response.length;

                $("#chap_id").empty();
         $("#chap_id").append("<option value=''>Select Chapter</option>");

                for( var i = 0; i<len; i++){
                    var cid = response[i]['id'];
                    var cname = response[i]['name'];
                    $("#chap_id").append("<option value='"+cid+"'>"+cname+"</option>");

                }
            }
        });
    });

});

下面是JSON响应或AddQuestionAjax.php文件中编写的代码

 <?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);
?>

Answer 1

我不知道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>

在循环记录之前，您还需要解析JSON。这可以通过这个

来完成

var res = JSON.parse(response);

然后你可以在选择的选择器中添加你的记录

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

1 个答案: