jquery - firebug の古いオプションを示す動的に設定された選択が、ページの正しいオプション

Question

動的な依存選択の行のセクションを含むユーザー データ入力用のページがあります。ページに含めたばかりの楽しいselect2に基づいて、ユーザーのオプションを自動選択しようとするまで、何かがおかしいことに気づきませんでした。依存選択の正しいオプションがページに表示されていますが、JQuery でそれらを操作しようとすると、古いオプションしか表示されません。神秘的。また、Foundation 4 を使用しているため、複雑さが増しています。これはうまく機能するフィドルですが、私のページはまだ壊れています: http://jsfiddle.net/jenborn/24Kpv/2/

ページが読み込まれると、関連する選択が次のようになります。

<div class="small-3 columns">
   <select id="fer1_1" class="medium">
   <? echo $fer1_opt ?>
   </select>
</div>
<div class="small-3 columns">
   <select id="fer2_1" name="fer2_1" class="medium">
   <option>None selected</option>
   </select>
</div>

fer1_1 が変更されたときに呼び出される関数は次のとおりです。

function populateDep(){
     id_in_str = $(this).attr('id');
     var ctrl = id_in_str.slice(0,3); // the second param is POSITION not LENGTH!
     var this_select = parseInt(id_in_str.slice(3,4), 10); // the second param is POSITION not LENGTH!
     var row = id_in_str.slice(5);

    $.getJSON("/cat_dropdowns.php",{parent_id: $(this).val(), required: '1', ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].value + '">' + j[i].text + '</option>';
      }

    var next_select = ++this_select;
      $("select#" + ctrl + next_select + "_" + row).html(options);
      Foundation.libs.forms.refresh_custom_select($('#' + ctrl + next_select + "_"  + row), true);
      Foundation.libs.forms.assemble();
    });
}

このコードは、fer2_1 の値を設定しようとする直前に、古いオプションを認識していることを示しています。

 $("#" + prefix + "2_" + num + " > option").each(function() {
     console.log(this.text + ' ' + this.value);
 });

私はfirebugでこれを見ます: 選択されていません

fer2_1 の値を自動選択しようとしているときは、次の行を使用しています (fer1_1 で正常に使用しています)。

$("select#" + prefix + "2_" + num).val(smart_cat_data['cat_lvl3_id']);