javascript - 如何在启动 ajax 查询的 jQuery 中触发方法 change()
问题描述
我有一个带有部门列表的选择项 html。当我选择一个(方法“更改”)时,它会在 jquery 中启动一个 ajax 请求,该请求将显示在另一个选择输入中,即从数据库中获取的城市列表。
一切正常,但我有一个案例,我希望能够取回为部门和 ville 选择项目存储的值,同时我希望能够修改它。
我尝试使用 jQuery .trigger("change"),但它没有进入我的更改功能。
我试着按照这里写的那样做,但没有区别。 使用链式ajax选择的jquery触发器更改
我的 html 文件:
<div class="inscriptionForm">
<label for="departement">Département :</label>
<select name="departement" id="departement" required="required">
<option value="">Choisissez un département</option>
<c:forEach items="${departements}" var="departement">
<option value="${departement.code}">${departement.code} - <c:out value="${departement.nom}"/></option>
</c:forEach>
</select>
</div>
<div class="inscriptionForm">
<label for="ville">Ville :</label>
<select name="ville" id="ville" required="required">
<option value="">Choisissez une ville</option>
<c:forEach items="${villes}" var="ville">
<option value="${ville.id}"><c:out value="${ville.nom}"/></option>
</c:forEach>
</select>
</div>
我的 Jquery 方法:
$(document).ready(function(){
var departement = ${spot.departement.code};
var ville = ${spot.ville.id};
$("#departement option[value="+departement+"]").prop('selected', true);
$('#departement').trigger("change");
$("#ville option[value="+ville+"]").prop('selected', true);
$('#departement').change(function() {
var choixDep = $('#departement').val();
$.getJSON("choixDepartement.do",{codeDep: choixDep},
function (data) {
$("#ville").empty();
var option = "<option value=''>Choisissez une ville</option>";
$("#ville").append(option);
$.each( data, function(key, val) {
.....
ajax callback treatment
........
});
}
);
});
});
我不明白为什么它没有进入方法.change();
。
解决方案
你的代码应该是这样的
$(document).ready(function(){
var departement = ${spot.departement.code};
var ville = ${spot.ville.id};
$("#departement option[value="+departement+"]").prop('selected', true);
$("#ville option[value="+ville+"]").prop('selected', true);
$('#departement').change(function() {
var choixDep = $('#departement').val();
$.getJSON("choixDepartement.do",{codeDep: choixDep},
function (data) {
$("#ville").empty();
var option = "<option value=''>Choisissez une ville</option>";
$("#ville").append(option);
$.each( data, function(key, val) {
.....
ajax callback treatment
........
});
}
);
});
$('#departement').trigger("change");
});
在 Jquery 中我们应该先定义事件然后我们需要触发
推荐阅读
- javascript - 使用 jQuery 检查/取消选中复选框数组
- javascript - 向在 firebase 数据库中注册的所有用户发送电子邮件
- vue.js - opengraph 标签不适用于组件 [Vuejs, vue-meta]
- php - 如何将varchar与使用mysql返回的值数组进行比较
- sql - 如何在 SQL 中使用 From 和 To 日期创建日期列表?
- php - 在 magento 2 中获取基于产品的运输方式
- python - 使用 Pandas 确定最佳组配置
- c# - Linq - 实体框架 - 使用 AsQueryable() 将值解密为对象
- google-app-engine - 服务帐号需要哪些权限才能部署到 App Engine?
- angular - 其他 Angular 是否可以使用服务?