Показать сообщение отдельно
  #7 (permalink)  
Старый 12.07.2016, 17:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

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>
Ответить с цитированием