Как вывести сумму значений 2 select?

Question

[dgallyamshin]

Есть скрипт, который считает, какой option выбран и вписывает значение, соответствующее определенному option.
https://jsfiddle.net/5nfejvrb/7/
Как сделать так, чтоб он выводил не значение одного select, а сумму значений 2 select? Если значения там одинаковы, то просто должен выводить это значение.

<form action="" id="checkout-form">
  <select name="" id="order-fld-4">
    <option value="Санкт-Петербург">Санкт-Петербург</option>
    <option value="Москва">Москва</option>
    <option value="Казань">Казань</option>
</select>
<select name="" id="order-fld-5">
    <option value="Санкт-Петербург">Санкт-Петербург</option>
    <option value="Москва">Москва</option>
    <option value="Казань">Казань</option>
</select>
<input type="text" name="custom_delivery_tax">
</form>

// обработчик изменения выпадающего списка
$('#order-fld-4').on('change', function(){
    // получаем город, который выбрал пользователь
    var city = $(this).val();
    // запускаем нашу функцию и передаем в нее город
    myCalculator(city);
});
// Функция расчета и записи стоимости доставки
function myCalculator(city){
    var cost;

    // Сопоставляем выбранные город и цену
    switch(city){
      case 'Москва': cost = 100; break;
      case 'Санкт-Петербург': cost = 200; break;
      case 'Казань': cost = 300; break;
      default: cost = 500;   
   }

   // если поле custom_delivery_tax не существует       
   if($('input[name="custom_delivery_tax"]').length == 0){  
     // добавить его
     $('#checkout-form').append('<input type="hidden" name="custom_delivery_tax" value="0">');
   }
   // запись стоимости доставки в поле
   $('input[name="custom_delivery_tax"]').val(cost);
}

Answer 1

[0xD34F]

Собираем объект вида { город: стоимость_доставки }:

const prices = {
  'Москва': 100,
  'Санкт-Петербург': 200,
  'Казань': 300,
};

Как посчитать стоимость доставки:

const getPrice = (city1, city2) =>
  city1 === city2
    ? prices[city1]
    : prices[city1] + prices[city2];

По событию change у формы достаём значения select'ов, считаем доставку:

$('form').on('change', function() {
  const [ city1, city2 ] = $('select', this).get().map(n => n.value);
  $('input', this).val(getPrice(city1, city2));
}).change();

или

const form = document.querySelector('form');
form.addEventListener('change', function() {
  const cities = Array.from(this.querySelectorAll('select'), n => n.value);
  this.querySelector('input').value = getPrice(...cities);
});
form.dispatchEvent(new Event('change'));