ホームページ > 記事 > ウェブフロントエンド > JavaScript二次元配列_javascriptスキルで実現した都道府県市連携メニュー

JavaScript二次元配列_javascriptスキルで実現した都道府県市連携メニュー

WBOYオリジナル: 2016-05-16 16:49:271859ブラウズ

ここにタイトルを挿入 /javascript" >
//都市リスト項目を格納するための 2 次元配列を初期化します
var city=[
["安慶","合肥","東城"],
["石家荘","保定" ","唐山"],
["鄭州","洛陽","開封"]
]//省を選択した場合、追加メソッドを呼び出します。 city
functionprofitChanged(sel){
//alert("select length" sel.options.length);
//sel は実際には選択オブジェクトです
//オプションコレクションを走査し、選択されたオプションを検索します
for( var x=0;x{
var opt=sel.options[x];
if(opt.selected)
{
// 選択した都市の選択にオプションを追加します
addCityToSelect(x)
}
}
}
// 選択した州の都市アイテムを都市の選択
function addCityToSelect (x){
//2 次元配列から対応する都市を検索します
var city=cities[x-1];
var citySelect=document.getElementById(" select_city");
/*==================ノードに既に存在する要素を削除=============== =
2 回目または n 回目のメソッド呼び出し時に、以前に追加されたノードが都市選択オブジェクトに追加されているため、クリアされます。
アイデア 1: オブジェクトのremoveChild()を選択し、ループトラバーサルを通じてバイトポイントを削除できるようにします。
アイデア 2: select.options.length=1 を直接設定しても同じ効果が得られます。
*/
//都市の選択オブジェクトの下のオプションの長さを 1 に設定します
citySelect.options.length=1;
// オプションコレクションの長さを設定して削除します
/ /citySelect .options.length=1;
for(var x=0;x{
//要素ノードオブジェクトを作成します
var optionName=document.createElement( "option ");
//オプションの表示内容を設定します
optionName.innerHTML=city[x];
//作成したオプションを追加します
citySelect.appendChild(optionName); 🎜> /*
ここで、特定の州にあるすべての都市を citySelect オブジェクトに追加します。
2 番目の州が 2 回目に選択されると、2 番目の州にあるすべての都市が追加されます。
citySelect ノード。この効果は間違っています。したがって、追加するたびに citySelect ノードの下のコンテンツを
クリアする必要があります。次に見てみましょう:
==================ノードに既に存在する要素を削除します===============
* /
}
}