通过 Ajax 调用为选择框赋值答案

【问题标题】：Assign values to select box through Ajax call通过 Ajax 调用为选择框赋值
【发布时间】：2015-08-03 10:52:58
【问题描述】：

我正在尝试在加载页面时进行 ajax 调用，并且我将通过此 ajax 调用获得的值我想将其分配为选择框值。但它不起作用。

普惠制代码：

<select id="${form?.id}" name="${form?.id}" ><option selected="selected">select</option></select>

JAVASCRIPT 代码：

    $(document).ready(function(){

        $.ajax({
           url: "${g.createLink(controller: "landing", action: "getBankKeys")}",
           data: {
                    country: $("#Country").text()
           }, 
       dataType: 'json',
       success: function(json){
       $.each(json, function(i, optionHtml){
              $('#BankKey').append(optionHtml);
           });
                }
            });
        });

常规代码：

def getBankKeys() {
        def bankKeys = vendorManagementDelegate.getBankKeys(params.country)
        println "Bank Keys +++++++++++++++++++++++++++++++++++++++++++"+bankKeys
        render bankKeys as JSON
    }

我通过上面的 println 语句获取 bankKeys，如下所示：

Bank Keys +++++++++++++++++++++++++++++++++++++++++++[0020000, 0020000, 0020001, 0020001, 0020007, 0020007, 0020067, 0020067, 0020149, 0020149, 0020199, 0020199, 0020215, 0020215, 0020218, 0020218, 0020243, 0020243, 0020245, 0020245, 0020255, 0020255, 0020265, 0020265, 0020274, 0020274, 0020278, 0020278, 0020315, 0020315, 0020345, 0020345, 0020348, 0020348, 0020371, 0020371, 0020389, 0020389, 0020505, 0020505, 0020506, 0020506, 0020531, 0020531, 0020557, 0020557, 0020558, 0020558, 0020567, 0020567, 0020588, 0020588, 0020662, 0020662, 0020680, 0020680, 0020681, 0020681, 0020693, 0020693, 0020779, 0020779, 0020870, 0020870, 0020885, 0020885, 0020891, 0020891, 0020922, 0020922, 0020943, 0020943, 0020978, 0020978, 0024006, 0024006, 0024138, 0024138, 0024150, 0024150, 0024152, 0024152, 0024165, 0024165, 0024227, 0024227, 0024291, 0024291, 0024329, 0024329, 0024344, 0024344, 0024350, 0024350, 0024430, 0024430, 0024468, 0024468, 0024618, 0024618, 0024658, 0024658, 0024692, 0024692, 0024730, 0024730, 0030000, 0030000, 0060000, 0060000, 0090000, 0090000, 0120000, 0120000, 0120001, 0120001, 0120002, 0120002, 0120004, 0120004, 0120005, 0120005, 0120006, 0120006, 0120007, 0120007, 0120008, 0120008, 0120009, 0120009, 0120010, 0120010, 0120011, 0120011, 0120012, 0120012, 0140000, 0140000, 0149200, 0149200, 0210000, 0210000, 0720000, 0720000, 123456, 123456, BANAMEX, BANAMEX, BANAMEX11, BANAMEX11, BANAMEX12, BANAMEX12, BANAMEX99, BANAMEX99, GEN01, GEN01, NONE, NONE, TRANSFERENCIA, TRANSFERENCIA]

【问题讨论】：

你有什么问题？应该在值中添加什么？如果你返回 JSON 可能会更好，这样你就可以轻松解析它。
@Barmar 很好，如果我将它作为 JSON 返回，我将如何将它分配给值
将dataType: "json" 添加到选项中。然后您可以使用data.propertyname 访问响应的字段。如果它是一个数组，您可以使用for 循环或$.each 循环它。
你还没有解释你想要这个做什么。应该如何将其放入<select> 的值中？
出于调试目的，确保在渲染之前 println 以查看将要渲染的内容应该没问题。看看这里github.com/vahidhedayati/ajaxdependancyselection/blob/master/…

标签： javascript jquery ajax grails gsp

【解决方案1】：

摆脱线：

println "Bank Keys +++++++++++++++++++++++++++++++++++++++++++"+bankKeys

如果您要返回 JSON，则必须是响应中的唯一内容。如果你在它前面放一个纯文本行，Javascript 将无法解析 JSON。

在Javascript中，需要为数组元素创建<option>元素：

$.each(json, function(i, option) {
    $("#BankKey").append($("<option>", {
        value: option,
        text: option
    }));
});

【讨论】：