warren buffet,
самое оптимальное для таких случаев ... 400 городов 79800 вариантов ... для 4 городов 6 вариантов растояний ...
количество линий на рисунке ... код ниже.
<!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: [
[706, 196, 812],
[908, 1518],
[820]
]
};
[].forEach.call(selects, function(select, ind) {
distance.city.forEach(function(text, i) {
select.options[i] = new Option(text, i)
});
select.addEventListener("change", function() {
var a = selects[0].value, b = selects[1].value, d = distance.dist, val;
val = d[a] && d[a][b - a - 1]||d[b] && d[b][a - b - 1]||0
dist.value = val
})
})
});
</script>
</body>
</html>