コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title>タイトルを挿入して</title>
<script type = "text/javascript">
// 2D配列を初期化して、都市リスト項目を保存します
var Cities = [
["anqing"、 "hefei"、 "Tongcheng"]、
["Shijiazhuang"、 "Baoding"、 "Tangshan"]、
["Zhengzhou"、 "luoyang"、 "kaifeng"]]
];
//州を選択するときは、この方法に電話して都市を追加します
関数provinceChanged(sel){
// alert( "select's length"+sel.options.length);
// SELは実際には選択オブジェクトです
//オプションコレクションを転送し、選択したオプションを見つけます
for(var x = 0; x <sel.options.length; x ++)
{
var opt = sel.options [x];
if(opt.selected)
{
//選択した都市にオプションを追加します
addCityToselect(x)
}
}
}
//選ばれた州の下の市のアイテムを都市に追加する
関数addCityToselect(x){
// 2次元配列から対応する都市を見つけます
var City = Cities [x-1];
var cityselect = document.getElementById( "select_city");
/*=============================================================================== ========================================================================== ========================================================================== ========================================================================== ========================================================================== ========================================================================== ========================================================================== ========================================================================== ==========================================================================
メソッドが2回目またはn回と呼ばれると、以前に追加されたノードがCity Selectオブジェクトに追加されたため、クリアされます。
アイデア1:選択オブジェクトのremoveChild()を選択します。これにより、単語ノードをループトラバーサルで削除できるようにします。
アイデア2:Select.options.length = 1を直接設定して、同じ効果を達成します。
*/
//都市の選択オブジェクトの下のオプションの長さを1に設定します
cityselect.options.length = 1;
//オプションコレクションの長さを設定して削除します
//cityselect.options.length = 1;
for(var x = 0; x <city.length; x ++)
{
//要素ノードオブジェクトを作成します
var optionname = document.createelement( "option");
//オプションのディスプレイコンテンツを設定します
optionname.innerhtml = city [x];
//選択したオプションを追加します
CitySelect.AppendChild(optionName);
/*
この場所では、特定の州の下のすべての都市をCitySelect Objectに追加します
2番目の州が2度目に選択されると、第2州の下のすべての都市が追加されます
CitySelectノードの下。この効果は間違っています。だから、各追加の前に、
CitySelectノードの下の内容をクリアします。次の外観:
========================== node ===========================================
*/
}
}
</script>
</head>
<body>
<onchange = "provinceChanged(this);">を選択します
<! - これの意味:ProvinceChanged(this)を呼び出す選択オブジェクトを指し、この方法で
オブジェクト自体をパラメーターとして渡して動作させます。 - >
<オプション> [州] </option>を選択してください
<オプション> anhui </option>
<オプション> hebei </option>
<オプション> henan </option>
</select>
<select id = "select_city">
<オプション> City </option>を選択してください
</select>
</body>
</html>