通过另一个select填充下拉列表
通过另一个select填充下拉列表
提问于 2018-06-07 14:28:08
我创建了这个：
User: <select id="sel_depart">
<option value="0">All users</option>
<?php
$all_users = User::getUsersAdmin();
foreach($all_users as $value){ ?>
<option value="<?php echo $value->id; ?>" <?php if($user_id == $value->id) echo "selected" ?>><?php echo $value->username; ?></option>
<?php } ?>
</select>
Locker: <select id="sel_user">
<option value="0">All lockers</option>
</select>我有这个javascript：
$(document).ready(function(){
$("#sel_depart").change(function(){
var user_id = $(this).val();
$.ajax({
url: 'admin/get_lockers.php',
type: 'post',
data: {user_id:user_id},
dataType: 'json',
success:function(response){
var len = response.length;
$("#sel_user").empty();
for( var i = 0; i<len; i++){
var id = response[i]['id'];
var name = response[i]['name'];
$("#sel_user").append("<option value='"+id+"'>"+name+"</option>");
}
}
});
});
});get_lockers.php输出为：
[{"id":2,"name":"edees"},{"id":3,"name":"20171114_154920"}]怎么啦？当我从dropdown中选择一个用户时，locker dropdown中没有填充选项。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 14:42:21
请尝试这个，它应该可以工作！
$(document).ready(function(){
$("#sel_depart").change(function(){
var user_id = 2;
$.ajax({
url: 'admin/get_lockers.php',
type: 'GET',
data: {user_id:user_id},
dataType: 'json',
success:function(response){
//Add this line and try
response = JSON.parse(JSON.stringify(response));
var len = response.length;
$('#sel_user').find('option').remove().end();
for( var i = 0; i<len; i++){
var id = response[i]['id'];
var name = response[i]['name'];
var option = new Option(name, id);
$('#sel_user').find('option').end().append($(option));
}
}
});
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>Select Department</p>
<select id="sel_depart" name="this" class="input-sm input-s form-control">
<option>Test A</option>
<option>Test B</option>
<option>Test C</option>
<option>Test D</option>
</select>
<p>Select User</p>
<select id="sel_user" name="this" class="input-sm input-s form-control">
<option>Test A</option>
<option>Test B</option>
<option>Test C</option>
<option>Test D</option>
</select>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50734289
复制相关文章
相似问题