Просмотр полной версии : Получение данных из таблицы.
Здравствуйте. Есть таблица расстояний между городами и два выпадающих списка с названиями городов. Как красиво сделать, чтобы при выборе в селектах отображалось расстояние из таблицы? Пробовал делать через "else if ", но при большом количестве городов скрипт очень большой получается))
Dilettante_Pro
12.07.2016, 12:49
alexXXL,
Есть таблица расстояний между городами
Вместо таблицы нужен массив значений. И тогда по выбранным городам искать нужное значение в массиве.
То есть сначала первым селектом мы выбираем нужную строку и создаем из нее массив, а при выборе второго - необходимое значение?
и создаем из нее массив
создайте массив и из него выбирайте, а лучше 2 массива первый названия городов, второй растояния и оба можно в один обьект соединить.
warren buffet
12.07.2016, 16:28
А как осуществляется связь между расстоянием и двумя городами?
Dilettante_Pro
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>
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
12.07.2016, 18:04
Ну то есть граф не поддается. В первом случае надо собирать вручную все уникальные названия, во втором dist растет согласно декартову произведению числа уникальных названий. То есть будет там 400 городов, в дисте будет 400 * 400, или 160 000. )))
warren buffet
12.07.2016, 18:15
Здесь N:N отношение, то есть таблица городов и таблица расстояний. Без sql записать можно так
var dist={
'706':['Москва','Рязань'],
'1234':['Москва','Питер'],
'765':['Москва','Казань'],
'8654':['Казань','Мухосрань'],
'10854':['Казань','Тмутаракань']
};
Теперь из этого объедка можно получить все уникальные топонимы и затем методом перебора искать совпадения.
Поэтому советую загнать барахло в БД, там будет ровно 2 таблицы с полями id и city, и таблица с полями id, city1id, city2id, dist.
warren buffet,
самое оптимальное для таких случаев ... 400 городов 79800 вариантов ... для 4 городов 6 вариантов растояний ...http://afox.ru/wp-content/uploads/media/%D0%A3%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B5%D0%BD%D 0%B8%D0%B5-%D0%BF%D1%80%D0%B5%D0%B4%D0%BF%D0%BE%D1%81%D1%8B%D 0%BB%D0%BE%D0%BA-%D0%B2%D0%BE%D0%B7%D0%BD%D0%B8%D0%BA%D0%BD%D0%BE%D 0%B2%D0%B5%D0%BD%D0%B8%D1%8F--%D0%B4%D0%B8%D1%81%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D 0%B8-%D1%83-%D0%B4%D0%B5%D1%82%D0%B5%D0%B8%CC%86-%D1%81-%D0%9E%D0%9D%D0%A0-%D0%BA%D0%B0%D0%BA-%D1%84%D0%B0%D0%BA%D1%82%D0%BE%D1%80-%D1%83%D1%81%D0%BF%D0%B5%D1%88%D0%BD%D0%BE%D0%B3%D 0%BE-%D0%BE%D0%B1%D1%83%D1%87/image9.png количество линий на рисунке ... код ниже.
<!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>
рони, спасибо за помощь. Только почему-то на jsfiddle Ваш код не работает (https://jsfiddle.net/alexXXL/uwavwu9o/3/) Не подскажите, почему?
alexXXL,
потому что дважды страница не загружается ... уберите строки 1 и 22 или нажмите javascript и замените onload на любой No wrap
alexXXL,
на всякий случай, как связаны расстояния с городами
distance = {
city: ["Москва","Питер","Рязань","Казань"],
dist: [
[706, 196, 812],//расстояние от "Москвы" до "Питер","Рязань","Казань"
[908, 1518],//расстояние от "Питера" до ,"Рязань","Казань"
[820]//расстояние от "Рязани" до "Казань"
]
};
vBulletin® v3.6.7, Copyright ©2000-2026, Jelsoft Enterprises Ltd. Перевод: zCarot