Question

我需要填充一些单选按钮以选择运输方式和价格与数据，具体取决于他们的订单将运往哪个国家/地区。我正在通过AJAX调用这样做。

$('#ShippingCountry').change(function() { // A dropdown list of countries

    var SelC = $(this).val();

    $.ajax({
    type : 'POST', 
    url : 'formprocess.php', 
    data: {Country: SelC},
    dataType : 'json',
    encode : true
    }).done(function(data) {

      //console.log(data.msg); // data.msg is the only thing returned
      // Here I need to construct a list of radio boxes...

    });

});

唯一返回的是data.msg。它的填充如下：

[
{"ID":"9","Name":"Zone 1 Standard","Charge":"23.00"},
{"ID":"11","Name":"Zone 1 FedEx","Charge":"37.00"},
{"ID":"10","Name":"Zone 1 Express","Charge":"44.50"}
]

我需要获取这些数据并为每个返回的项目制作单选按钮，如：

<label class="uit-option gblock">
    <input type="radio" name="ShippingMethod" value="9">
    <span class="radio-option"></span>
    Zone 1 Standard $23.00
</label>

非常感谢任何帮助。

Answer 1

我只是将数据映射到元素数组。不应该太难了

var radios = data.msg.map(function(datum) {
    var label = $('<label>').addClass('ui-option gblock').text(datum.Name + ' $' + datum.Charge),
        input = $('<input>').attr({
            type: 'radio',
            name: 'ShippingMethod',
            value: datum.ID
        }),
        span = $('<span>').addClass('radio-option');

    return label.prepend(input, span);
});

JSFiddle

使用来自ajax帖子的json编码数据来填充单选按钮

1 个答案: