jquery - Select2 - データを動的にロードする

Question

select2プラグインを使用しています。2番目の選択ボックスに基づいて、配列領域からe3にデータを「ロード」させようとしています。これは私のコードです:

var regions = [{"first":["City1", "City2"],"second":["City3", "City4"]}];
$('#e2').select2().on('change', function() {
    $.each(regions[($("#e2").val())], function(key,value) {
        $("#e3").append("<option value='"+value+"'>"+value+"</option>");
    });
}).trigger('change');

#e2編集:の値を変更するたびに発生するエラーは次のとおりです。Uncaught TypeError: Cannot read property 'length' of undefined

私は何を間違っていますか？

ありがとう！:)

EDIT2：

$('#e2').select2().on('change', function() {
    $.each(region[$("#e2").select2("val")], function(key,value) {
        alert(region[$("#e2").select2("val")]);
        $("#e3").append("<option value='"+value+"'>"+value+"</option>");
    });
}).trigger('change');

これは提案されました...それでも以前のエラー（Uncaught TypeError）が発生します。ただし、アラートは次を返します：未定義

Answer 1

これ: これ$("#e2").val()に変更する必要があります:$("#e2").select2("val")