php - 使用 ajax 的相关下拉菜单不刷新但控制台正在显示数据
问题描述
我正在使用 MVC 结构,这里是 JQuery:
<script type="text/javascript">
$('select[name="provider_id"]').change(function() {
var provider_id = $(this).val();
if (provider_id) {
$.ajax({
url: url + '/ProductsAjax/GetOutletByProvider',
type: 'POST',
dataType: 'json',
data: {
provider_id: provider_id
},
})
.done(function(data) {
$.each(data, function(index, item) {
var outlets = "<option value='" + item.id + "'>" + item.outlet_name + "</option>";
$('select[name="outlet"]').append(outlets);
console.log(item.id + ' ' + item.outlet_name);
})
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus + ': ' + errorThrown);
console.warn(jqXHR.responseText);
});
} else {
$('select[name="outlet"]').empty();
}
});
</script>
它在控制台中输出正确的数据,但下拉菜单本身根本不显示数据。什么都没发生。
以下是选择菜单:
<div class="form-group m-form__group">
<label for="example_input_full_name">
Select Service Provider
</label>
<select class="form-control m-bootstrap-select m_selectpicker" name="provider_id">
<option value="">Select Service Provider</option>
<?php foreach($data['sproviders'] as $service_provider): ?>
<option value="<?php echo $service_provider->service_provider_id; ?>"><?php echo $service_provider->sp_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group m-form__group">
<label for="example_input_full_name">
Select Outlet
</label>
<select class="form-control m-bootstrap-select m_selectpicker" name="outlet" id="outlet">
</select>
</div>
由于正确的数据显示在控制台中,我无法弄清楚为什么它没有进入第二个选择菜单。
控制台数据:
108 Branch One
109 Branch Two
110 Branch Three
解决方案
<script type="text/javascript">
$('select[name="provider_id"]').change(function() {
var provider_id = $(this).val();
if (provider_id) {
$.ajax({
url: url + '/ProductsAjax/GetOutletByProvider',
type: 'POST',
dataType: 'json',
data: {
provider_id: provider_id
},
})
.done(function(data) {
var outlets="";
$.each(data, function(index, item) {
outlets += "<option value='" + item.id + "'>" + item.outlet_name + "</option>"; // concat all options
console.log(item.id + ' ' + item.outlet_name);
})
$('select[name="outlet"]').html(outlets); // add all options
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus + ': ' + errorThrown);
console.warn(jqXHR.responseText);
});
} else {
$('select[name="outlet"]').empty();
}
});
</script>
推荐阅读
- javascript - Ajax/jQuery Django 刷新类元素
- javascript - 如何在highcharts 3d中更改相机角度
- css - 将样式组件与反应和故事书一起使用时字体未加载
- python - 使用 Selenium + Python 3.8 并且无法单击链接,想知道如何处理 onclick?
- c# - Xamarin 表单 ViewModel 与列表中的列表
- python - AttributeError:模块“tensorflow.compat”没有属性“v1”Tensorflow v:1.10.0
- node.js - 未定义必需的,使用电子时,我该如何解决?(已经尝试过节点集成)
- c# - 使用现有方法或重写 - 帮助程序库
- powershell - 在 WebsCount 参数中列出 0 的 SharePoint Online 子网站
- ios - 如何使用我的操作系统版本在 Apple Watch 上安装应用程序?