忍者ブログ

ゆるいSEの小ネタ集

ゆるキャラ好きのITエンジニアが書くTips。 ゆるキャラ命なSEのIT徒然草 https://itmagic.hatenablog.com/

javascriptサンプル集

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

javascriptサンプル集

■画面表示時にCookieを有効期限切れにするスクリプトサンプル
<script type="text/javascript">
<!--
function delCookie1()
{
     var date1 = new Date();
     date1.setTime(0);
     document.cookie = "cookie1=;expires="+date1.toGMTString();
}
// -->
</script>
</head>
<body onload="delCookie1()">



■option項目動的絞り込み
2つの関連するselect optionが並んでおり、
1つを選択時にもう一つのoptionの項目を自動的に絞り込む処理。

例)県を選ぶと、その県の市町村項目のみが表示
<html>
<head>
<script type="text/javascript">
<!--
function changeCity(Obj) {
var aryPrefCity = [
  ['shiga', 'hikone', '彦根'],
  ['shiga', 'oumihachiman', '近江八幡'],
  ['shiga', 'kusatu', '草津'],
  ['osaka', 'ibaraki', '茨木'],
  ['osaka', 'takatuki', '高槻'],
  ['osaka', 'suita', '吹田'],
  ['tottori', 'tottori', '鳥取'],
  ['tottori', 'kurayoshi', '倉吉'],
  ['tottori', 'yonago', '米子'],
];
    //選択値を取得
    var prefValue = Obj.value;
//    alert(prefValue);
    //市町村セレクトボックス取得
    var cityObj = document.form1.city;
    //alert(cityObj.name);
    cityObj.length = 0;
    var cityIdx = 0;
    //選択値に該当する市町村一覧を取得
    for(var i=0; i<aryPrefCity.length; i++) {
        if (aryPrefCity[i][0] == prefValue) {
            var cityValue = aryPrefCity[i][1];
            var cityText = aryPrefCity[i][2];
//            alert('cityValue:' + cityValue + ',cityText:' + cityText);
            //option項目を生成
            cityObj.length = cityIdx + 1;
              cityObj.options[cityIdx].value = cityValue;
                cityObj.options[cityIdx].text = cityText;
            cityIdx++;
        }
    }
}
// -->
</script>
</head>
<body>
<form name="form1" method="post">
<p>都道府県:<br>
<select name="prefecture" onchange="changeCity(this)">
<option value=""></option>
<option value="shiga">滋賀</option>
<option value="osaka">大阪</option>
<option value="tottori">鳥取</option>
</select></p>
<p>市町村:<br>
<select name="city">
</select></p>
</form>
</body>
</html>


■画面遷移
<SCRIPT language="JavaScript">
<!--
function nextPage() {
location.href="js_sample043-3.htm";
}
//-->
</SCRIPT>
PR

コメント

ただいまコメントを受けつけておりません。

プロフィール

HN:
ゆるキャラ命
性別:
非公開

P R