AutoSelecteren van Nederlandse gemeenten per provincie

Met deze toepassing wordt een database met Nederlandse gemeenten per provincie geraadpleegd en retourneert bij het selecteren van een provincie een nieuwe keuzemogelijkheid met gemeenten.


gemeenten_per_provincie.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link type="text/css" href="gemeenten_per_provincie.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(':input.provincie').change(function() {
            if ( $(':input.provincie').val() >= 1 && $(':input.provincie').val() <= 12 ) {
                $.get('ajax_gemeenten_per_provincie.php', { provincie_id : $(":input.provincie").val() }, function(xml) {
                    if (xml.getElementsByTagName("gemeente").length >= 1) {
                        $("div#ajax_gemeente").show();
                        var select = '';
                        $("div.ajax_gemeente_data").html(select);
                    }
                });
            } else {
                $("div#ajax_gemeente").hide();
            }
        });
    });
    </script>
</head>
<body>
    <div id="container">
        <form method="post" action="gemeenten_per_provincie.php">
            <div class="float_left row_1">
                <label for="provincie">Provincie</label>
            </div>
            <div class="float_left row_2">
                <select name="provincie" id="provincie" class="provincie">
                    <option value="">maak een keuze</option>
                    <option value="1">Drenthe</option>
                    <option value="2">Flevoland</option>
                    <option value="3">Friesland</option>
                    <option value="4">Gelderland</option>
                    <option value="5">Groningen</option>
                    <option value="6">Limburg</option>
                    <option value="7">Noord-Brabant</option>
                    <option value="8">Noord-Holland</option>
                    <option value="9">Overijssel</option>
                    <option value="10">Utrecht</option>
                    <option value="11">Zeeland</option>
                    <option value="12">Zuid-Holland</option>
                </select>
            </div>
            <div class="clear_left"></div>
            <div id="ajax_gemeente">
                <div class="float_left row_1">
                    <label for="gemeente">Gemeente</label>
                </div>
                <div class="float_left row_2">
                    <div class="ajax_gemeente_data"></div>
                </div>
                <div class="clear_left"></div>
            </div>
            <div class="float_right">
                <input type="submit" />
            </div>
            <div class="clear_right"></div>
        </form>
    </div>
</body>

gemeenten_per_provincie.css
label
{
    cursor: pointer;
}

div#ajax_gemeente
{
    display: none;
}

div#container
{
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

div.row_1
{
    width: 150px;
    padding: 5px;
    font-family: "Lucida Grande", "Lucida Sans Unicode";
    font-size: 14px;
    color: #000000;
}

div.row_2
{
    padding: 5px;
}

.float_left { float: left; }
.float_right { float: right; }
.clear_left { clear: left; }
.clear_right { clear: right; }

ajax_gemeenten_per_provincie.php
header("Content-type: text/xml");

mysql_connect("localhost", "root", "root") or die(mysql_error());
mysql_select_db("davidvandertuijn") or die(mysql_error());
mysql_query("SET NAMES 'utf8'");

$provincie_id = (int) $_GET['provincie_id'];

$sql = sprintf("SELECT id, provincie_id, description FROM gemeenten WHERE provincie_id = %d", $provincie_id);

$result = mysql_query($sql) or die(mysql_error());

if ( mysql_num_rows($result) != 0 )
{
    $dom = new DOMDocument('1.0','utf-8');

    $cities = $dom->createElement('gemeenten');

    $dom->appendChild($cities);

    while ($row = mysql_fetch_object($result))
    {
        $city = $dom->createElement('gemeente');
        $cities->appendChild($city);
        $id = $dom->createElement('id', $row->id);
        $city->appendChild($id);
        $description = $dom->createElement('description');
        $description->appendChild($dom->createCDATASection($row->description));
        $city->appendChild($description);
    }

    echo $dom->saveXML();
}

gemeenten_per_provincie.php
if ($_POST)
{
    echo '<pre>';
    print_r($_POST);
    echo '</pre>';
}

Resultaat

AutoSelecteren


Zie ook : Database van Nederlandse gemeenten per provincie