簡體   English   中英

如何使用JQuery從AJAX調用中使用JSON值更新下拉列表

[英]How to update dropdown with JSON value from AJAX call using JQuery

嗨,我在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方法函數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);
                  },
            });
        } 
}

json的格式應為

 {id: x, value: y}

然后,ajax成功函數類似於此-

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

非常感謝您的回復。 我得到了答案。 我在這里發布,以便其他人也需要同樣的內容。

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);
                  },
            });
        } 
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM