Question

I have a gsp page and on that have a ‘<g:select>‘ element as:

<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>

I have to add more “option” dynamically for this select using JavaScript. My JavaScript part looks like:

$.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”, in the “success”, is a list. For each officeData, I need to add an option to the ’select’ described above, but the ways I tried did not work. I need help with the proper use of $.each and how can I use that in this context. Can anyone help? The above example is adding only the first one, missing all others.

Answer 1

Should be something like this:

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

However, in your example it does not seem like officeData is a collection since officeData.id and officeData.regionName are not nested inside items. You could use console.log(officeData); to output the data structure to your browser console (assuming you are using something like Chrome or FireFox+devtools).