0

我有一个 gsp 页面，上面有一个 ' <g:select>' 元素：

<label class="control-label">Applicable Offices:</label>
<span class="span6">
    <select name="data.OfficeId" class="required j-office-select" style="height:26px;padding:1px;">
        <option value="0">Select an office...</option>
    </select>
</span>

我必须使用 JavaScript 为这个选择动态添加更多“选项” 。我的 JavaScript 部分如下所示：

$.ajax({
    url: epcm.urlManager.getUrl({controller: 'controllerName', action:'methodName'}),
    cache: false,
    contentType: "application/json",
    type: "POST",
    dataType: "json",
    data: JSON.stringify(params),
    success: function(officeData) {
        var selectOffice = dialog.find('.j-office-select');
        selectOffice.empty();
        // OfficeData is a list . For each officeData , I need to add an option to the’ select’, but ways I tried did not work.I need to know the proper use of $.each and how can I use that in this context
        selectOffice.append('<option value="'+officeData.id+'">'+officeData.regionName+'</option>' );
        selectOffice.removeAttr('disabled');
        window.location.reload();
    }
});

“成功”中的“OfficeData”是一个列表。对于每个 officeData，我需要为上述“选择”添加一个选项，但我尝试的方法不起作用。我需要有关正确使用$.each以及如何在这种情况下使用它的帮助。任何人都可以帮忙吗？上面的例子只添加了第一个，而没有添加所有其他的。

4

1 回答 1

0

应该是这样的：

$.each(officeData, function(index, item){
   selectOffice.append('<option value="'+item.id+'">'+item.regionName+'</option>' );
} );

但是，在您的示例中，officeData 似乎不是一个集合，因为 officeData.id 和 officeData.regionName 没有嵌套在项目中。您可以使用console.log(officeData);将数据结构输出到浏览器控制台（假设您使用的是 Chrome 或 FireFox+devtools 之类的东西）。

于 2012-10-17T21:36:03.897 回答