Indexへ戻る
サンプル(2)AjaxとPHP

  地方を選択すると都道府県の選択リストが変化し、都道府県を選択すると市区町村の選択リストが変化します。下の方の「検索結果」の直下の div タグの部分に結果を差し込みます。
サンプル(2)の実行
サンプル(2)のJavascript
サンプル(2)のPHP
■サンプル(2)のHTML
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<
title>サンプル(1)</title>
<
link href="../maitz.css" rel="stylesheet" type="text/css">
<
script language="javascript" src="ajax.js"></script>
<script language="javascript" src="sample01.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" onLoad="setList()">
<table width="702" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td colspan="2">
      <table width="700" border="0" cellspacing="0" cellpadding="0">
        <form action="" method="post" name="form1" id="">
        <tr>
          <td width="70">
            <select name="selChiku" onChange="changeChiku(this)">
              <option value="0" selected>地方
              <option value="1">北海道
              <option value="2">東北
              <option value="3">中部・北陸
              <option value="4">関東・甲信
              <option value="5">近畿
              <option value="6">中国
              <option value="7">四国
              <option value="8">九州
              <option value="9">沖縄
            </select>
          </td>
          <td width="90">
            <select name="selKen" onChange="changeKen(form.selChiku, this)">
              <option value="0" selected>都道府県
            </select>
          </td>
          <td width="80">
            <select name="selCity" onChange="changeCity(form.selChiku, form.selKen, this)">
              <option value="0" selected>市区町村
            </select>
          </td>
        </tr>
        </form>
      </table>
    </td>
  </tr>
  <tr>
    <td>検索結果</td>
  </tr>
  <tr>
    <td align="center" valign="top"><div id="result"></div></td>
  </tr>
</table>
</body>
</html>