alexXXL,
<!DOCTYPE html>
<html>
<head>
<title>Distance</title>
</head>
<script>
var distance = [{ city1: "Москва", city2: "Питер", dist: 706 },
{ city1: "Москва", city2: "Рязань", dist: 196 },
{ city1: "Москва", city2: "Казань", dist: 812 },
{ city1: "Рязань", city2: "Питер", dist: 908 },
{ city1: "Рязань", city2: "Казань", dist: 820 },
{ city1: "Питер", city2: "Казань", dist: 1518}];
</script>
<body>
<select id="city1">
<option value = "Москва">Москва</option>
<option value = "Питер">Питер</option>
<option value = "Рязань">Рязань</option>
<option value = "Казань">Казань</option>
</select>
<select id="city2">
<option value = "Москва">Москва</option>
<option value = "Питер">Питер</option>
<option value = "Рязань">Рязань</option>
<option value = "Казань">Казань</option>
</select>
<input id="dist" type="text" />
<script>
document.body.addEventListener("change", function (e) {
var c1 = document.getElementById("city1").value,
c2 = document.getElementById("city2").value,
ds = document.getElementById("dist");
for (var i = 0; i < distance.length; i++) {
if ((distance[i].city1 == c1 && distance[i].city2 == c2) || (distance[i].city1 == c2 && distance[i].city2 == c1)) {
ds.value = distance[i].dist;
i = distance.length;
} else { ds.value = 0; }
}
});
</script>
</body>
</html>