使用 Ajax 填充多选下拉列表

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

然后，您可以在选择选择器中添加记录