JSP+JavaScript 2級連動静的
8640 ワード
つのjspページでは、2段階のドロップダウンフレーム連動を実現し、データベースデータをリアルタイムで読み込みます.
この招待状は静的な方法を使ってJavaScriptの中で2級の連動を実現すると紹介しています.
声明:コードの中で使う省市のデータはネット上の1つの招待状から取って、実現の部分は自分で書きました.
1.ページ読み込みが完了したら、最初の項目のオプションを初期化して、
2.selectタグのためにオブザーバーイベントを書いて、JavaScriptは連動を実現すればいいです.
この招待状は静的な方法を使ってJavaScriptの中で2級の連動を実現すると紹介しています.
声明:コードの中で使う省市のデータはネット上の1つの招待状から取って、実現の部分は自分で書きました.
<span style="background-color: rgb(153, 255, 153);"><span style="color:#993300;"><span style="font-family:Verdana;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<script type="text/javascript">
var where = new Array();
where[" "]= new Array(" ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," ");
where[" "] = new Array(" "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ");
where[" "] = new Array(" "," "," "," "," "," ");
function init(){
for(var w in where){
var cp = new Option(w,w);
document.getElementById("city").add(cp,null);
}
var cp = new Option(where[" "][0],where[" "][0]);
document.getElementById("city2").add(cp,null);
}
function addcity(){
document.getElementById("city2").length=0;
var city = document.getElementById("city").value;
for(var i=0;i<where[city].length;i++){
var cp = new Option(where[city][i],where[city][i]);
document.getElementById("city2").add(cp,null);
}
}
window.onload = init;
</script>
<body>
<select id="city" onchange="addcity()" style="width:110px">
</select>
<select id="city2" style="width:110px">
</select>
</body>
</html></span></span></span>1.ページ読み込みが完了したら、最初の項目のオプションを初期化して、
2.selectタグのためにオブザーバーイベントを書いて、JavaScriptは連動を実現すればいいです.