前言
由于项目需要,所以需要搞一个动态加载的下拉框的默认选定功能,下拉框总共有两级。
实现
首先通过ajax
同步获取下拉框信息:
$.ajax({
async: false,
type: "GET",
url: "../../message/*******",
dataType: "json",
error: function () {
alert('请求失败');
},
success: function (data) {
for (var i = 0; i < data.length; i++) {
$("#categoryOne").append("<option value='" + data[i].cId + "' >" + data[i].cCategoryName + "</option>");
}
}
});
然后设置一级下拉框属性:
$('#categoryOne').val('${articleInfo.cOneCategoryId}');
再就是设置一级下拉框的change
属性:
$("#categoryOne").change(function () {
var parentId = $("#categoryOne").val();
if (parentId == 0) {
parentId = -1;
}
$.ajax({
async: false,
type: "GET",
url: "../../message/*******",
data: "parentId="+parentId,
dataType: "json",
error: function () {
alert('请求失败');
},
success: function (data) {
$("#categoryTwo").html('<option value="-1">二级类目</option>');
for (var i = 0; i < data.length; i++) {
$("#categoryTwo").append("<option value='" + data[i].cId + "' >" + data[i].cCategoryName + "</option>");
}
}
});
});
然后就是触发一级下拉框的change
属性:
$("#categoryOne").trigger('change');
最后就是设置二级下拉框属性:
$('#categoryTwo').val('${articleInfo.cTwoCategoryId}');
下边是一二级下拉框的定义:
<tr>
<td style="text-align: right;font-weight: bold;color: #369;">一级类目<font color="red">*</font>:</td>
<td>
<select name="categoryOne" id="categoryOne" style="width: 100px;">
<option value="">一级类目</option>
</select>
</td>
<td style="text-align: right;font-weight: bold;color: #369;">二级类目<font color="red">*</font>:</td>
<td>
<select name="categoryTwo" id="categoryTwo" style="width: 100px;">
<option value="">二级类目</option>
</select>
</td>
</tr>
需要注意的地方
要使$("#categoryOne").trigger('change');
这个命令有作用就先得把一级下拉框的change定义了。我在网上查了好多资料,好像没有说要注意这点的。或许这个对于前端开发来说是常识吧,还是写接口快,网页搞起来微麻烦!XDDD
愿每个努力的人都能被世界温柔以待