JavaScript省市連動実現コード



<html>
<head>
    <title>JS , 。</title>
</head>
<body bgcolor="#FFFFFF" alink="#333333" vlink="#333333" link="#333333" topmargin="0"
    leftmargin="0" onload="init()">
    <form  method="post" name="creator" enctype="multipart/form-data">
    <script language="javascript" type="text/javascript">
        var where = new Array(35);
        function comefrom(loca, locacity) { this.loca = loca; this.locacity = locacity; }
        where[0] = new comefrom(" ", " ");
        where[1] = new comefrom(" ", "| | | | | | | | | | | | | | | | | | "); 
        where[2] = new comefrom(" ", "| | | | | | | | | | | | | | | | | | | ");
        where[3] = new comefrom(" ", "| | | | | | | | | | | | | | | | | | ");
        where[4] = new comefrom(" ", "| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | ");
        where[5] = new comefrom(" ", "| | | | | | | | | | | ");
        where[6] = new comefrom(" ", "| | | | | | | | | | | ");
        where[7] = new comefrom(" ", "| | | | | | | | | | | | ");
        where[8] = new comefrom(" ", "| | | | | | | | | | | | | | ");
        where[9] = new comefrom(" ", "| | | | | | | | | ");
        where[10] = new comefrom(" ", "| | | | | | | | | | | | | ");
        where[11] = new comefrom(" ", "| | | | | | | | | | | | | ");
        where[12] = new comefrom(" ", "| | | | | | | | | | | ");
        where[13] = new comefrom(" ", "| | | | | | | | | | | | | | | | | ");
        where[14] = new comefrom(" ", "| | | | | | | | | ");
        where[15] = new comefrom(" ", "| | | | | | | | | | | ");
        where[16] = new comefrom(" ", "| | | | | | | | | | | | | | | | | ");
        where[17] = new comefrom(" ", "| | | | | | | | | | | | | | | | | | ");
        where[18] = new comefrom(" ", "| | | | | | | | | | | | | | | | ");
        where[19] = new comefrom(" ", "| | | | | | | | | | | | | | ");
        where[20] = new comefrom(" ", "| | | | | | | | | | | | | | | | | | | | | ");
        where[21] = new comefrom(" ", "| | | | | | | | | | | | | | ");
        where[22] = new comefrom(" ", "| | ");
        where[23] = new comefrom(" ", "| | | | | | | | | | | | | | | | | ");
        where[24] = new comefrom(" ", "| | | | | | | | | ");
        where[25] = new comefrom(" ", "| | | | | | | | | | | | | | | | ");
        where[26] = new comefrom(" ", "| | | | | | | ");
        where[27] = new comefrom(" ", "| | | | | | | | | | ");
        where[28] = new comefrom(" ", "| | | | | | | | | | | | | | ");
        where[29] = new comefrom(" ", "| | | | ");
        where[30] = new comefrom(" ", "| | | | | | | | ");
        where[31] = new comefrom(" ", "| | | | | | | | | | | | | ");
        where[32] = new comefrom(" ", "");
        where[33] = new comefrom(" ", "");
        where[34] = new comefrom(" ", "| | | | | | | | | | | | | | | | | | | ");
        where[35] = new comefrom(" ", "| | | | | | ");
        function select() {
            with (document.creator.province) { var loca2 = options[selectedIndex].value; }
            for (i = 0; i < where.length; i++) {
                if (where[i].loca == loca2) {
                    loca3 = (where[i].locacity).split("|");
                    for (j = 0; j < loca3.length; j++) { with (document.creator.city) { length = loca3.length; options[j].text = loca3[j]; options[j].value = loca3[j]; var loca4 = options[selectedIndex].value; } }
                    break;
                }
            }
            document.creator.newlocation.value = loca2 + loca4;
        }
        function init() {
            with (document.creator.province) {
                length = where.length;
                for (k = 0; k < where.length; k++) { options[k].text = where[k].loca; options[k].value = where[k].loca; }
                options[selectedIndex].text = where[0].loca; options[selectedIndex].value = where[0].loca;
            }
            with (document.creator.city) {
                loca3 = (where[0].locacity).split("|");
                length = loca3.length;
                for (l = 0; l < length; l++) { options[l].text = loca3[l]; options[l].value = loca3[l]; }
                options[selectedIndex].text = loca3[0]; options[selectedIndex].value = loca3[0];
            }
        }

    </script>
    <font color="#000000"><b> :</b> <select name="province" onchange="select()"></select> <select
        name="city" onchange="select()">
    </select>
        <input type="text" name="newlocation" maxlength="12" size="12" style="font-weight: bold" />
    </font>
    </form>
</body>
</html>