alexXXL,
<!DOCTYPE html>
<html>
<head>
<title>Distance</title>
<meta charset="utf-8">
</head>
<body>
<select class="city"></select>
<select class="city"></select>
<input class="dist" type="text" />
<script>
window.addEventListener("DOMContentLoaded", function() {
var selects = document.querySelectorAll(".city"),
dist = document.querySelector(".dist"),
distance = {
city: ["Москва","Питер","Рязань","Казань"],
dist: [
[0, 706, 196, 812],
[706, 0, 908, 1518],
[196, 908, 0, 820],
[812, 1518, 820, 0]
]
};
[].forEach.call(selects, function(select, ind) {
distance.city.forEach(function(text, i) {
select.options[i] = new Option(text, i)
});
select.addEventListener("change", function() {
dist.value = distance.dist[select.value][selects[+!ind].value]
})
})
});
</script>
</body>
</html>