Я узнал о jQuery через другие вопросы, которые опубликованы здесь, которые несколько похожи.Моя проблема в том, что у меня есть выпадающий список, в котором перечислены 7 континентов мира.Как только континент выбран, он должен показать страны, расположенные ниже к континенту.Вот где у меня проблемы:
jsonTest.html
<html>
<head><title>JSON jQuery AJAX</title></head>
<body>
<div>Users </div>
<select id="sel_user">
</select>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="myscript.js" type="text/javascript"></script>
</body>
</html>
getCountry.php
<?php
require_once('pdoDB.class.php');
$countryID = $_POST['countryID'];
//$countryID = "EU";
//echo $countryID;
$db = pdoDB::getConnection();
$country_arr = array();
$sql = "SELECT Name,SurfaceArea
FROM w_country WHERE Continent='".$countryID."'";
$stmt = $db->query($sql);
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$name = $row['Name'];
$surfaceArea = $row['SurfaceArea'];
$country_arr[] = array("name" => $name, "surfaceArea" => $surfaceArea);
echo json_encode($country_arr);
}
?>
myscript.js
$(document).ready( function() {
$.getJSON( "ajax1.php", function(obj) {
$.each(obj, function(key, value) {
// append("<li>"+ value.Name +
// "</li></br>");
$("#sel_user").
append("<option value='"+value.Id+"'>"
+value.Name+"</option>");
});
});
$("#sel_user").change(function(){
var Id = $(this).val();
alert(Id);
$.ajax({
url: 'getCountry.php',
type: 'post',
data: {countryID:Id},
dataType: 'json',
success:function(response){
var len = response.length;
$("#sel_user").empty();
for( var i = 0; i<len; i++){
var id = response[i]['name'];
var area = response[i]['surfaceArea'];
$("#sel_user").append("<li>heheh</li>");
}
}
});
});
});
Я могу показать континенты в раскрывающемся списке, но не могу передать идентификатор страны на страницу php, чтобы показать подробности о стране.