Отправляем
массивы данных. При выборе страны будем
подгружать список городов этой страны.
s_3_4.php
<?php
// json_encode
— возвращает JSON-представление данных.
if($_GET["country"] == 1) echo json_encode(array("1"
=> "Moscow", "2" => "Peterburg"));
elseif($_GET["country"] == 2) echo json_encode(array("3"
=> "Berlin", "4" => "Munich"));
?>
index.html
<!DOCTYPE
HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Формат JSON</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select[name='country']").bind("change", function() {
$.get("s_3_4.php", {country: $("select[name='country']").val()}, function (data) {
data = JSON.parse(data);
// Очищаем список городов, когда пользователь выбирает другую страну.
$("select[name='city']").empty();
for(var id in data) {
$("select[name='city']").append($("<option value='" + id + "'>" + data[id] + "</option>"));
}
});
});
});
</script>
</head>
<body>
<label>Страна:</label>
<select name="country">
<option value="0" selected="selected"></option>
<option value="1">Russia</option>
<option value="2">Germany</option>
</select>
<br /><br />
<label>Город:</label>
<select name="city">
<option value="0"></option>
</select>
</body>
</html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Формат JSON</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select[name='country']").bind("change", function() {
$.get("s_3_4.php", {country: $("select[name='country']").val()}, function (data) {
data = JSON.parse(data);
// Очищаем список городов, когда пользователь выбирает другую страну.
$("select[name='city']").empty();
for(var id in data) {
$("select[name='city']").append($("<option value='" + id + "'>" + data[id] + "</option>"));
}
});
});
});
</script>
</head>
<body>
<label>Страна:</label>
<select name="country">
<option value="0" selected="selected"></option>
<option value="1">Russia</option>
<option value="2">Germany</option>
</select>
<br /><br />
<label>Город:</label>
<select name="city">
<option value="0"></option>
</select>
</body>
</html>
Комментариев нет:
Отправить комментарий