<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="css/style.css" rel="stylesheet" type="text/css"> <title>Auswahl aus NRW-Karte</title> <meta name="description" content="Mapselect"> <meta name="author" content="Walter Hupfeld"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/raphael-min.js"></script> <script src="js/nrw.js"></script> <script src="js/map.js"></script> <script type="text/javascript"> function get_data(pBezirk,pKreis,pSchulform) { //strURL="http://dev-schulentwicklung.qua-lis.de/mapselect/ajax/get_data.php"; strURL="https://home.bankerheide.de/schulen-in-nrw/ajax/get_data.php"; strParam = "?bezirk=" + pBezirk + "&kreis=" + pKreis + "&sf=" + pSchulform; // alert(strURL+strParam); $.getJSON(strURL+strParam , function( data ) { console.log("TEST"); }) .done(function(data) { var items = []; $.each(data,function( index, data1 ) { items.push("<div class='ds'>"); $.each(data1, function(key,val){ if (val.length>0){ if (key=="Homepage") items.push("<a href='"+val+"' target='_blank'>"+val+"</a>"); else //items.push(key+": "+val + "<br>"); items.push(val+"<br>"); } //console.log(key); }); items.push("</div>"); }); $("#my-new-list").html(items); }) .fail(function(){ console.log("error"); }); } $(document).ready(function(){ init_map(); //function to populate child select box list1(regierungsbezirke); list(duesseldorf); //mark_bezreg("51"); //If parent option is changed $("#bezreg").change(function() { var bezreg = $(this).val(); //get option value from parent //mark_bezreg(bezreg); get_data(bezreg,-1,20); switch(bezreg){ //using switch compare selected option and populate child case "59": list(arnsberg); break; case "57": list(detmold); break; case "51": list(duesseldorf); break; case "53": list(koeln); break; case "55": list(muenster); break; default: //default child option is blank $("#kreis").html(''); break; } }); $("#kreis_select").change(function() { var kreis = $(this).val(); //get option value from parent var schulform = $("#schulform_select").val(); get_data(-1,kreis,schulform); polygonSelected=get_polygon(kreis); mark_kreise(kreis); $("#kreis").html(polygon[get_polygon(kreis)]); }); // $("#schulform_select").change }); </script> </head> <body> <div id="pagewrap"> <header> <h1>Berufskollegs in NRW</h1> </header> <section id="content"> <p>Berufskollegs in NRW</p> </section> <section id="middle"> <div id="poly">Bitte Kreis wählen:</div> <div id="map"></div> <div id="kreis">Kreis</div> <div id="my-new-list" ></div> </section> <aside id="sidebar"> <p>Bezirk: <select name="bezreg" id="bezreg"></select><br> Kreis: <select name="kreis_select" id="kreis_select"></select><br> Schulform:<select name="schulform_select" id="schulform_select"> <option value="02">Grundschule</option> <option value="08">Förderschule</option> <option value="04">Hauptschule</option> <option value="14">Sekudarschule</option> <option value="15">Gesamtschule</option> <option value="16">Gemeinschaftsschule</option> <option value="10">Realschule</option> <option value="20">Gymnasium</option> <option value="17">Waldorfschule</option> <option value="25">Weiterbildungskolleg</option> <option value="30">Berufskolleg</option> </select><br> </p> </aside> <footer> <p> © Walter Hupfeld <!-- http://www.jonathan-petitcolas.com/2013/07/18/create-clickable-svg-france-regions-map.html --> </p> </footer> </div> </body> </html>