jquery - json 配列による Optgroup とオプションの HTML スニペット

Question

私は次のようなjson配列を取得します

   [{"Childid":17,"ChildName":"A","Parentid":81,"ParentName":"AA"},  
   {"Childid":2,"ChildName":"B","Parentid":81,"ParentName":"AA"},
   {"Childid":6,"ChildName":"B","Parentid":82,"ParentName":"AB"},
   {"Childid":5,"ChildName":"A","Parentid":82,"ParentName":"AB"}]

これから私は選択リストを構築しようとしています。しかし、optgroup の状況で立ち往生しました。最初に、配列からすべての一意の親名を見つけようとしています。これは opt グループとして機能します。

 var cnames = [];
                   $.each(data, function (index, value) {
                    if ($.inArray(value.ParentName, cnames) == -1) {
                        cnames.push(value.ParentName);
                    }
                });

次に、両方の配列で反復を行い、オプション [子の名前とプロパティ] を設定します。

 $.each(cnames, function (index, value) {
   var begin = index;
   data = $.map(data, function (item, a) {
   if (value == item.ParentName) {
   return begin == index ? "<optgroup label='" + item.ParentName + "'><option value=" + item.Childid + ">" + item.ChildName + "</option>" : "<option value=" + item.Childid + ">" + item.ChildName + "</option>";
  }
});
});

しかし、私は次のような出力を得ます。

原因 begin は常にループ後に =0 です。1 回の呼び出しでこれらの反復をすべて回避できますか。

アップデート：

---

のような変更を行いました

 $.each(cnames, function (index, value) {
                    var begin = index;
                    data = $.map(data, function (item, a) {
                        if (value == item.ParentName) {
                            begin += 1;
                            return begin-1 == index ? "<optgroup label='" + item.ParentName + "'><option value=" + item.Childid + ">" + item.ChildName + "</option>" : "<option value=" + item.Childid + ">" + item.ChildName + "</option>";
                        }

                    });
                });

しかし、これは optgroup を閉じません。