Не срабатывает функция при выборе <option> - ов в <datalist>

179

29 апреля 2019, 12:10

$(document).ready(function() { 
  $(function() { 
 
    var Step = $('input[name="Step"]'), 
      Result = $('input[name="Result"]'), 
      Granite = 2500, 
      Marble = 1700, 
      Onyx = 5500, 
      Travertine = 2300, 
      Limestone = 4600; 
 
    $('#Calculation-step__one-close').on('click', function() { 
      $('.Calculation-step__one').css('display', 'none'); 
      $('.Calculation-step__two').css('display', 'block'); 
    }); 
 
    $('#Type-of-stone').change(function() { // Пробовал исп-ть .on('click', function() {...... 
      if ($('#Type-of-stone option:selected').val() == Гранит) { //Вот  
        //тут уже ничего не происходит 
        Step.on('input', function() { 
          Result.val(($(this).val() * Granite) + Рублей); 
        }); 
      } 
      if ($('#Type-of-stone option:selected').val() == Мрамор) { 
        Step.on('input', function() { 
          Result.val(($(this).val() * Marble) + ' Рублей'); 
        }); 
      } 
      if ($('#Type-of-stone option:selected').val() == Оникс) { 
        Step.on('input', function() { 
          Result.val(($(this).val() * Onyx) + ' Рублей'); 
        }); 
      } 
      if ($('#Type-of-stone option:selected').val() == Травертин) { 
        Step.on('input', function() { 
          Result.val(($(this).val() * Travertine) + ' Рублей'); 
        }); 
      } 
      if ($('#Type-of-stone option:selected').val() == Известняк) { 
        Step.on('input', function() { 
          Result.val(($(this).val() * Limestone) + ' Рублей'); 
        }); 
      } 
 
    }); 
 
 
    $('#Calculation-step__two-close').on('click', function() { 
      $('.Calculation-step__two').css('display', 'none'); 
      $('.Calculation-step__result').css('display', 'block'); 
    }); 
 
 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="Calculation-step__one"> 
  <h6>Введите площадь отделки</h6> 
  <input type="text" id="Step__one" name="Step" value="площадь отделки, м2"> 
  <button id="Calculation-step__one-close">Далее</button> 
  <br> 
  <small>шаг 1 из 3</small> 
</div> 
<div class="Calculation-step__two"> 
  <h6>Выберете тип камня</h6> 
  <input class="Calculation-step__list" list="Type-of-stone" name="Type-of-stone" required> 
  <datalist id="Type-of-stone"> 
                      <option id="Granite-cost" value="Гранит"> 
                      <option id="Marble-cost" value="Мрамор"> 
                      <option id="Onyx-cost" value="Оникс"> 
                      <option id="Travertine-cost" value="Травертин"> 
                      <option id="Limestone-cost" value="Известняк"> 
                      </datalist> 
  <button id="Calculation-step__two-close">Далее</button> 
  <br> 
  <small>шаг 2 из 3</small> 
</div> 
<div class="Calculation-step__result"> 
  <h6>Примерная стоимость</h6> 
  <input type="text" id="Result" name="Result" value="Руб"> 
  <br> 
  <small>шаг 3 из 3</small> 
</div>

На выходе в классе .Calculation-step__result ничего не выводиться просто. Как сделать так что бы при выборе определенного option-a выводилось произведение одного из var-ov ( Granite, Marble, Onyx, Travertine,Limestone) * ввод числа в input-е с класcом .Сalculation-step__one?

Answer 1

Ох и намудрили Вы с разметкой и скриптами - море лишних атрибутов. Попробовал чуть сократить и оптимизировать:

$(document).ready(function() { 
  $(function() { 
    var Step = $('input[name="Step"]'), 
      Stone = $('input[name="Type-of-stone"]'), 
      Result = $('input[name="Result"]'); 
    var aPrices = { 
      'Гранит': 2500, 
      'Мрамор': 1700, 
      'Оникс': 5500, 
      'Травертин': 2300, 
      'Известняк': 4600 
    } 
     
    $('input[name="Type-of-stone"]').on('input change', function() { 
      let nSquare = parseFloat(Step.val()) || 0; 
      Result.val(nSquare * aPrices[$(this).val()] + ' Рублей'); 
    }); 
     
    $('#Calculation-step__one-close').on('click', function() { 
      if (Number.isNaN(parseFloat(Step.val()))) { alert('Укажите площадь'); Step.focus(); return } 
      $('.Calculation-step__one').css('display', 'none'); 
      $('.Calculation-step__two').css('display', 'block'); 
    }); 
     
    $('#Calculation-step__two-close').on('click', function() { 
      if (aPrices[Stone.val()] === undefined) { alert('Укажите тип камня'); Stone.val(''); Stone.focus(); return } 
      $('.Calculation-step__two').css('display', 'none'); 
      $('.Calculation-step__result').css('display', 'block'); 
    }); 
  }); 
});

.Calculation-step__two, .Calculation-step__result { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="Calculation-step__one"> 
  <h6>Введите площадь отделки</h6> 
  <input type="text" id="Step__one" name="Step" value="" placeholder="площадь отделки, м²"> 
  <button id="Calculation-step__one-close">Далее</button> 
  <br> 
  <small>шаг 1 из 3</small> 
</div> 
<div class="Calculation-step__two"> 
  <h6>Выберете тип камня</h6> 
  <input class="Calculation-step__list" list="Type-of-stone" name="Type-of-stone" value="" placeholder="тип камня" required> 
  <datalist id="Type-of-stone"> 
    <option value="Гранит"> 
    <option value="Мрамор"> 
    <option value="Оникс"> 
    <option value="Травертин"> 
    <option value="Известняк"> 
  </datalist> 
  <button id="Calculation-step__two-close">Далее</button> 
  <br> 
  <small>шаг 2 из 3</small> 
</div> 
<div class="Calculation-step__result"> 
  <h6>Примерная стоимость</h6> 
  <input type="text" id="Result" name="Result" value="" placeholder="стоимость, руб."> 
  <br> 
  <small>шаг 3 из 3</small> 
</div>