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