如何使用JQuery从AJAX调用更新带有JSON值的下拉列表

时间:2015-12-01 10:07:46

标签: jquery ajax spring jsp

您好我在Ajax成功块中收到了一个JSON列表,我想将这些值分配给JSP上的下拉列表potentialFailureModeList。我是JSON的新手,我已经尝试了很多在网上找到但没有得到任何东西。请帮我。任何有用的链接也可以。

//来自JSP的代码

<td><select name="fmeaEntityForm[0].potentialFailureMode.id"
                            id="potentialFailureMode0" onchange="potentialFailureModeText(this)">
                                <option value="-1"><spring:message code="label.fmea.select.potentialFailureMode" /></option>
                                <c:forEach items="${potentialFailureModeList}" var="pfm">
                                    <option value="${pfm.id}">${pfm.potentialFailureMode}</option>
                                </c:forEach>
                        <option value="0"><spring:message code="label.fmea.select.other" /></option>
                        </select></td>

//在ajax中接收模式

{"potentialFailureModeList":[{"id":3,"potentialFailureMode":"potentialFailureMode1","remark":"1"},
             {"id":4,"potentialFailureMode":"potentialFailureMode2","remark":"2"}]}

// Ajax方法 function getpotentialFailureModeList(elementIdIndex){

        if (-1 != document.getElementById("subSystem"+elementIdIndex+"").value)  {

            $.ajax({
                type: "GET",
                url: '/ISO26262/FmeaDocumentPage/potentialFailureModeList',
                data: ({subSystemId : $('#subSystem'+elementIdIndex+'').val() }),
                success: function(items) {
                    alert("success");
                    alert(items);
                    // to do task
                },
                error: function (e) {
                    alert('Error Received: ' + e);
                  },
            });
        } 
}

2 个答案:

答案 0 :(得分:0)

json的格式应为

 {id: x, value: y}

然后ajax成功函数与此类似 -

success: function (items) {
    $.each(items, function (index, item) {
    $('#potentialFailureMode0').append($('<option>', {value: item.id, text: item.potentialFailureMode}));
});

答案 1 :(得分:0)

非常感谢您的回复。我得到了答案。我在这里发帖,所以如果其他人需要相同的话。

function getpotentialFailureModeList(elementIdIndex)  {

        if (-1 != document.getElementById("subSystem"+elementIdIndex+"").value)  {

            $.ajax({
                type: "GET",
                url: '/ISO26262/FmeaDocumentPage/potentialFailureModeList',
                data: ({subSystemId : $('#subSystem'+elementIdIndex+'').val() }),
                dataType:'json',
                success: function(items) {
                    var list = items;
                    $.each(list.potentialFailureModeList, function (index, item) {
                        $('#potentialFailureMode'+elementIdIndex+'').append($('<option>', {value: item.id, text: item.potentialFailureMode}));
                        })
                },
                error: function (e) {
                    alert('Error Received: ' + e);
                  },
            });
        } 
}