Javascript_javascript スキルを使用して動的メニューを追加するコード例

先来看看效果：

Htmlソースコード：

复制代码代码如下:

 
 
 
 
 
 
 
 
 
<フォームアクション="#"> 

 

 

 

 
州:
 
都道府県を選択してください 
河北 
山東省 
  
 
都市:
 
 
 
エリア：
 
 
 

 

 
 
 

 
 
 
 

JavaScript ソースコード

复制代码代码如下:

$(document).ready(function () {
// 3 つのドロップダウン ボックスを検索
var ProvinceSelect = $(".Province").children("select");
var CitySelect = $(".City").children("select");
var AreaSelect = $(".Area").children("select");
var AddressSelect=$(" .AddressSelect");
//2 番目のドロップダウン ボックスのイベントを登録します
ProvinSelect.change(function () {
//1. 現在のドロップダウン ボックスの値を取得します
var GovernmentValue = $(this ).val();
//1.1 最初のドロップダウン ボックスの内容が変更される限り、3 番目のドロップダウン ボックスは非表示になります
AreaSelect.parent() .hide();
AddressSelect.hide ();
AddressSelect.html("")
//2 値が空でない場合は、都市のドロップダウン ボックスを表示します。 (ProvinceValue != "") {
CitySelect.html ("");
$("都市を選択してください").appendTo(CitySelect); 🎜> switch(ProvinceValue)
/実際のプロジェクトでは、この都市配列は次のようになります。簡単にするために、
"HeBei":
var CityOfHeBei=["ShiJiaZhuang" を直接カスタマイズしました。 ","滄州","廊坊"];
for(var i=0;i ;option value='" CityOfHeBei[i] "'>" CityOfHeBei [i] "").appendTo(CitySelect);
case "山東":
var CityOfShanDon=["済南", "徳州", "青島"]; ){
'" CityOfShanDon[i] "'>" hanDon[i] "").appendTo(CitySelect); 
休憩。 
}
CitySelect.parent().show();    
} else {
CitySelect.parent().hide(); 
}
}); 
//第二个下拉框注册イベント
CitySelect.change(function () {
var CityValue = $(this).val();
AddressSelect.hide();
AreaSelect.parent().hide();
AddressSelect.html("");
if (CityValue != "") {
AreaSelect.html(""); 🎜> $( "エリアを選択してください").appendTo(AreaSelect);
switch(CityValue)
{
//实际项目中，这个区数组肯定是在服务器获取的，这里為了简便，我就直接自定数组
//如果追求完美、这里还可一道缓存、重複获取防止
case "ShiJiaZhuang":
var AreaOfCity= ["GaoXinQu","KaiFaQu","XinHuaQu"];
for(var i=0;i $("" AreaOfCity[i] "").appendTo(AreaSelect);
}
ブレーク; 
case "滄州":
var AreaOfCity=["XinHuaQu","YunHeQu"];       
for(var i=0;i $("" OfCity[i] " } 
休憩。 
case "LangFang":
var AreaOfCity=["AnCiQu","GuangYangQu"]; 
for(var i=0;i $("" OfCity[i] " }
休憩。 
case "青島":
var AreaOfCity=["GaoXinQu","KaiFaQu","XinHuaQu"];    
for(var i=0;i $("" OfCity[i] " }
休憩。 
case "徳州":
var AreaOfCity=["XinHuaQu","YunHeQu"];       
for(var i=0;i $("" OfCity[i] " } 
休憩。 
case "済南":
var AreaOfCity=["AnCiQu","GuangYangQu"]; 
for(var i=0;i $("" OfCity[i] " }
休憩。 
}
AreaSelect.parent().show();  
} else {
AreaSelect.parent().hide(); 
}
}); 
AreaSelect.change(function(){
var AreaValue=$(this).val();
AddressSelect.html("");
if (AreaValue!=""){
$("住所は -- 州: " ProvinSelect.val() " 市: " CitySelect.val() " 地域: " AreaSelect.val() "").appendTo (AddressSelect);
AddressSelect.show();
//alert("住所は州: "プロヴィンスセレクト.val() "市: " CitySelect.val() "エリア: " AreaSelect.val() );
}
})
}); 

ここでも Jquery について言及していますが、この効果は同様に実現されており、徹底的な Jquery の使用法のために、不使用のものは特に追加されていません。