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

David van der Tuijn
"Mijn naam is David van der Tuijn, als senior php developer bij Floro Webdevelopment B.V. werk ik samen met een projectleider, back-end developers, front-end developers en designers, op basis van een functioneel- (FO) en technisch ontwerp (TO), bouw ik webapplicaties die voldoen aan de nieuwste ontwikkelingen op internet gebied. Ik werk zelfstandig, weet hoe een architectuur opgezet moet worden en kan deze uitdragen in een multidisciplinair team. binnen een project adviseer ik over de juiste methoden en technieken. Ik ontwikkel en bewaak de kwaliteit van de development werkzaamheden in projecten en kan projecten binnen een afgegeven planning afronden."