前言

由于项目需要，所以需要搞一个动态加载的下拉框的默认选定功能，下拉框总共有两级。

实现

首先通过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

_{愿每个努力的人都能被世界温柔以待}