0

私は、都市リストと州の依存関係の詳細を含むこのjavascriptオブジェクトを持っています。

var cityList = {
'1' : ['CITY_CODE_A','City A', '2','11','2'],
'2' : ['CITY_CODE_B','City B','','11',''],
'3' : ['CITY_CODE_C','City C', '','11','']
};
var stateList = {
'11' : ['STATE_CODE_A', 'State A'],
'12' : ['STATE_CODE_B', 'State B'],
'13' : ['STATE_CODE_C', 'State C'],
'14' : ['STATE_CODE_D', 'State D']
};

選択された状態に応じて、キーが関数に渡され、キーが都市リストの値 (配列のインデックス 3 要素) と一致し、見つかった場合は のオプション タグが形成されます<select>。コードは次のとおりです。

$.each(cityList, function(key, value) {
  if(selectedVal == value[3]){
  $("select[id='"+selectid+"']").append('<option value="'+value[0]+'" code="'+key+'">'    +value[1] + '</option>'); 
  }
});

この都市リストが 50K レコード (2 MB) になると、州に 50K の都市が含まれます (パフォーマンス テスト)。上記のコードは、コードをローカルで実行している Windows 7 マシンで都市リストのドロップダウンを読み込むのに 2 分かかります。forネイティブ/ループで試しましinたが、満足のいく結果が得られませんでした。

時間を短縮する方法についてのアイデアはありますか? JS オブジェクト構造を変更する必要がありますか?

4

2 に答える 2

0

私はまた、50k のスクロールダウン アイテムの代わりに検索をより有効に使用する友人でもあります。しかし、あなたの質問に答えるために、次を使用してコードを改善します。

var html = '';
$.each(cityList, function (key, value) {
    html += '<option value="' + value[0] + '" code="' + key + '">' + value[1] + '</option>'
});

$("select[id='1']").append(html);

optionあなたの例で言ったように、DOMは50k回ではなく、1回だけ変更されるため、これにより作成が大幅に高速化されます。(ショートデモ)

于 2013-09-26T09:20:43.837 に答える
-2

編集：@downvoters、なぜそれが間違っていると思うのか説明してもらえますか? しかし、まずこのテストを実行してみてください。

特定の州の都市を取得したい場合は、州 ID がキーとなるマップを作成できます。

var cityList = {
   11 : [ ['CITY_CODE_A','City A', '2','11','2'], ['CITY_CODE_B','City B','','11',''] ],
   12 : [ ['CITY_CODE_C','City C', '2','12','2'], ['CITY_CODE_D','City D','','12',''] ]
}

これで、反復するだけで済みますcitylist[ selectedVal ]

$.each(cityList[selectedVal], function(key, value) {
  $("select[id='"+selectid+"']").append('<option value="'+value[0]+'" code="'+key+'">'    +value[1] + '</option>'); 
});

さらに最適化する<option>には、ループ内での DOM 操作 (要素の追加) を避け、代わりにバッファリングする必要があります。

var $selectEl = $('<select />');
$.each(cityList[selectedVal], function(key, value) {
  $selectEl.append('<option value="'+value[0]+'" code="'+key+'">'    +value[1] + '</option>'); 
});
$selectEl.attr( 'id', selectid );
$("select[id='"+selectid+"']").replaceWith( $selectEl );
于 2013-09-26T08:43:16.007 に答える