f:selectItemsの項目をJavaScriptで変更すると検証エラーになる

JSF初心者です。

以下のことが実現できるのかを調査しております。
どなたか、ご教授いただければ幸いです。

1. JSFでセレクトボックスを表示（画面初期化時は項目は空）
2. 画面表示後、JavaScriptでセレクトボックスの項目を設定。
3. Submitを実行し、次画面へ遷移する。

[2]の部分まではできており、画面にもJavaScriptで設定した
項目が表示されております。
しかし、その状態で[3]を行うと検証エラーとなります。

～～～xhtml

市区町村
<h:selectOneMenu id="sgcMen" value="#{bb.sgcCd}" styleClass="sel" rendered="true" disabled="false" immediate="true">
  <f:selectItems value="#{bb.sgcItems}" "/>
</h:selectOneMenu>&nbsp;
<h:commandButton value="送　信"  action="#{bb.next()}" styleClass="btn"/>

～～～Bean

@Named
@RequestScoped
public class Bb {
    private ArrayList<SelectItem> sgcItems;
    private String sgcNam;
    private String sgcCd;

/*setter/getterは割愛 */

～～JavaScript

var list = {
    '':'選択してください',
    '00:北海道':'北海道',
    '01:青森県':'青森県'};

$.each(list, function (value, name) {
    $(sgcMenのID).append($('<option>').val(value).text(name));
});