JS/JQUERY Калькулятор — как правильно работать с массивом?

Question

[M4xwell]

Здравствуйте. Есть калькулятор на js/jquery заказа такси из одной точки в другую. Есть 2 select'a - откуда и куда. И 1 select - в одну сторону или в две (если в две - умножаем значение x2).

Суть и схема работы скрипта:
Select1 - выбрали option Хабаровск (value="khabarovsk")
Select2 - выбрали option Москва (value="moscow")
Далее скрипт добавляет нижнее подчеркивание и получается - khabarovsk_moscow

У нас записаны все эти варианты переменных - как глобальные, первым делом. (Что МСК - Хабаровск, что Хабаровск - Москва, цена едина) Например:

var khabarovsk_moscow = 10000;
var moscow_khabarovsk = 10000;

и так далее

var spb_moscow = 5000;
var moscow_spb = 5000;

А далее нам нужно сравнить if-else что выбрано и если такая переменная есть, показать ее
Пример кода: (переменная direction - как раз khabarovsk_moscow )

else if (direction == 'khabarovsk_moscow') {
	$('.final_price').html(khabarovsk_moscow);	
}
else if (direction == 'spb_moscow') {
	$('.final_price').html(spb_moscow);	
}

Тоесть мы спрашиваем - если переменная Хабаровск_Москва или Спб - Москва и так далее, то вставить в нужное место (.final_price) его значение.
_______________
Внимание вопрос - как сделать так, что бы у нас не было этого огромного перебора if-else - else if для каждой переменной? Как-то миниатюрно написать что-то вроде:

if (direction == 'ПОИСК_ПО_ВСЕМ_ПЕРЕМЕННЫМ_ЗНАЧЕНИЯ_ОТКУДА_И_КУДА') {
	$('.final_price').html(ВСТАВИТЬ_ЗНАЧЕНИЕ_ПЕРЕМЕННОЙ);	
}

Простыми словами - может быть как-то в массив засунуть все значения откуда_куда и в скрипте перебирать на совпадение? Если выбран в 1 селекте Хабаровск, а во втором Москва, то --> Сделать поиск по массиву на значение данной переменной и вывести его на экран в .final_price.

Answer 1

[Rsa97]

Вместо переменных khabarovsk_moscow, spb_moscow и т.д. заведите один объект и просто выбирайте нужную цену из него

prices = {
  khabarovsk: {
    moscow: 1000,
    spb: 1000
  },
  moscow: {
    khabarovsk: 1000,
    spb: 500
  },
  spb: {
    khabarowsk: 1000,
    moscow: 500
  }
};
$('.final_price').html(prices[$('#select1').val()][$('#select2').val()]);

Comments

[M4xwell]

Вы просто космос)) большое спасибо!

Маленький момент - есть третий select с такими option's:

<option value="1">Только туда</option>
<option value="2">Туда и обратно</option>

Можно ли (точнее как правильно) ценник при выборе туда и обратно умножить на 2 и передать в .final_price?

И оставьте пожалуйста ваши координаты - я буду к вам за платными консультациями обращаться

[Rsa97]

M4xwell,

$('.final_price').html(prices[$('#select1').val()][$('#select2').val()]*$('#select3').val());

[M4xwell]

Rsa97, на какой адрес кошелька отправлять "спасибо"?

[alex-1917]

а если выбрать Москва-Москва?))))
А если городов хотя бы 2десятка будет?)))
В скрипте заведомо избыточные параметры, например Хабар-Москва и Москва-Хабар, так как по логике это одна цена.
При большем кол-ве городов будет адовая простыня...
Есть проще метода...

Answer 2

[0xD34F]

<select id="departure"></select>
<select id="destination"></select>
<select id="type">
  <option value="1">в одну сторону</option>
  <option value="2">туда и обратно</option>
</select>
<div id="price"></div>

const routes = [
  [ 'Хабаровск',      'Казань', 100 ],
  [ 'Хабаровск',        'Омск', 200 ],
  [ 'Хабаровск', 'Владивосток', 300 ],
  [ 'Хабаровск',     'Иркутск', 400 ],
  [ 'Хабаровск',      'Москва', 500 ],
  [    'Тюмень',    'Владимир', 234 ],
  [    'Тюмень',  'Красноярск', 345 ],
  [    'Тюмень',         'СПб', 456 ],
  [    'Тюмень',      'Москва', 567 ],
  [    'Тюмень',      'Якутск', 678 ],
];

const prices = routes.reduce((acc, n) => (
  (acc[n[0]] = acc[n[0]] || [])[n[1]] = n[2],
  (acc[n[1]] = acc[n[1]] || [])[n[0]] = n[2],
  acc
), {});

const setOptions = (el, options) =>
  el.innerHTML = options.map(n => `<option>${n}</option>`).join('');

const updatePrice = () =>
  price.textContent = type.value * prices[departure.value][destination.value];

const departure = document.querySelector('#departure');
const destination = document.querySelector('#destination');
const type = document.querySelector('#type');
const price = document.querySelector('#price');

type.addEventListener('change', updatePrice);
destination.addEventListener('change', updatePrice);
departure.addEventListener('change', e => {
  setOptions(destination, Object.keys(prices[e.target.value]));
  updatePrice();
});

setOptions(departure, Object.keys(prices));
departure.dispatchEvent(new Event('change'));

Answer 3

[alex-1917]

Пример массивов для 5 городов, разницу в размере кода видно даже на глаз...
варик от rsa97

var err = 'выберите разные города';
	prices = {
	  khabarovsk: {
		khabarovsk: err,
		moscow: 1200,
		spb: 1000,
		rdn: 750,
		smr: 888
	  },
	  moscow: {
		khabarovsk: 1200,
		moscow: err,
		spb: 500,
		rdn: 650,
		smr: 777
	  },
	  spb: {
		khabarowsk: 1000,
		moscow: 500,
		spb: err,
		rdn: 550,
		smr: 555,
	  },
	  rdn: {
		khabarowsk: 750,
		moscow: 650,
		spb: 550,
		rdn: err,
		smr: 444
	  },
	  smr: {
		khabarowsk: 750,
		moscow: 650,
		spb: 550,
		rdn: 888,
		smr: err
	  }
	};
$( "select.city_choice" ).change(function() {
	$('.final_price').html(prices[$('#city_from').val()][$('#city_to').val()]);
});

мой варик (и принцип наполнения массива видно на глаз... хотя в первом варике наверное удобнее заполнять города, если заполняет секретарша, но в случае ошибки туда или обратно будет по разной цене, в моем варике это исключено):

var err = 'выберите разные города';
	altprices = [
		['moscow','khabarovsk',1200],
		['moscow','spb',500],
		['moscow','rdn',650],
		['moscow','smr',777],
		['khabarovsk','spb',1000],
		['khabarovsk','rdn',750],
		['khabarovsk','smr',888],
		['spb','rdn',550],
		['spb','smr',555],
		['rdn','smr',444]
	];
	$( "select.city_choice2" ).change(function() {
		for(var i = 0; i < altprices.length;i++){
			if ($('#city_from2').val() == $('#city_to2').val()) {
				$('.final_price2').html(err);
				return;
			}
			if($.inArray($('#city_from2').val(), altprices[i]) != -1 && $.inArray($('#city_to2').val(), altprices[i]) != -1){
				$('.final_price2').html(altprices[i][2]);
			}
		}
	});

https://jsfiddle.net/xpvt214o/717290/