Форум

alexXXL · #1 (**permalink**) 12.07.2016, 12:36

Здравствуйте. Есть таблица расстояний между городами и два выпадающих списка с названиями городов. Как красиво сделать, чтобы при выборе в селектах отображалось расстояние из таблицы? Пробовал делать через "else if ", но при большом количестве городов скрипт очень большой получается))

Dilettante_Pro · #2 (**permalink**) 12.07.2016, 12:49

alexXXL,

Сообщение от alexXXL

Есть таблица расстояний между городами

Вместо таблицы нужен массив значений. И тогда по выбранным городам искать нужное значение в массиве.

alexXXL · #3 (**permalink**) 12.07.2016, 13:26

То есть сначала первым селектом мы выбираем нужную строку и создаем из нее массив, а при выборе второго - необходимое значение?

рони · #4 (**permalink**) 12.07.2016, 14:14

Сообщение от alexXXL

и создаем из нее массив

создайте массив и из него выбирайте, а лучше 2 массива первый названия городов, второй растояния и оба можно в один обьект соединить.

warren buffet · #5 (**permalink**) 12.07.2016, 16:28

А как осуществляется связь между расстоянием и двумя городами?

Dilettante_Pro · #6 (**permalink**) 12.07.2016, 16:34

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>

рони · #7 (**permalink**) 12.07.2016, 17:33

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>

warren buffet · #8 (**permalink**) 12.07.2016, 18:04

Ну то есть граф не поддается. В первом случае надо собирать вручную все уникальные названия, во втором dist растет согласно декартову произведению числа уникальных названий. То есть будет там 400 городов, в дисте будет 400 * 400, или 160 000. )))

warren buffet · #9 (**permalink**) 12.07.2016, 18:15

Здесь N:N отношение, то есть таблица городов и таблица расстояний. Без sql записать можно так

var dist={
    '706':['Москва','Рязань'],
    '1234':['Москва','Питер'],
    '765':['Москва','Казань'],
    '8654':['Казань','Мухосрань'],
    '10854':['Казань','Тмутаракань']
};

Теперь из этого объедка можно получить все уникальные топонимы и затем методом перебора искать совпадения.

Поэтому советую загнать барахло в БД, там будет ровно 2 таблицы с полями id и city, и таблица с полями id, city1id, city2id, dist.

рони · #10 (**permalink**) 12.07.2016, 19:39

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>

Форум

Справочник

Discord чат

Курсы javascript