前言
由于項(xiàng)目需要，所以需要搞一個動態(tài)加載的下拉框的默認(rèn)選定功能，下拉框總共有兩級洒擦。
實(shí)現(xiàn)
首先通過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>");
}
}
});
然后設(shè)置一級下拉框?qū)傩裕?/p>
$('#categoryOne').val('${articleInfo.cOneCategoryId}');
再就是設(shè)置一級下拉框的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>");
}
}
});
});
然后就是觸發(fā)一級下拉框的change屬性：
$("#categoryOne").trigger('change');
最后就是設(shè)置二級下拉框?qū)傩裕?/p>
$('#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定義了。我在網(wǎng)上查了好多資料硼莽，好像沒有說要注意這點(diǎn)的≈笞荩或許這個對于前端開發(fā)來說是常識吧懂鸵，還是寫接口快，網(wǎng)頁搞起來微麻煩行疏！XDDD
愿每個努力的人都能被世界溫柔以待
