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

「success」の「OfficeData」はリストです。各 officeDataについて、上記の「select」にオプションを追加する必要がありますが、試した方法ではうまくいきませんでした。の適切な使用$.each方法と、このコンテキストでの使用方法について助けが必要です。誰でも助けることができますか？上記の例では、最初の 1 つだけを追加し、他のすべてを削除しています。

4

1 に答える 1

0

次のようになります。

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

ただし、あなたの例では、 officeData.id と officeData.regionName が項目内にネストされていないため、 officeData がコレクションのようには見えません。データ構造をブラウザ コンソールに出力するために使用できますconsole.log(officeData);(Chrome や FireFox+devtools などを使用していると仮定します)。

于 2012-10-17T21:36:03.897 に答える