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

@101101 · Регистрация: 23.10.2018

Студворк — интернет-сервис помощи студентам

HTML-содержимое:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <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>

JQuery код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
$(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');
       });
 
 
    });
});

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

@Уф · 23.11.2018, 10:22

в 17 строчке неправильный селектор, ты вешаешь обработчик на список вариантов, а не на инпут надо сделать

JavaScript
1
$('input.Calculation-step__list').change(....

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	[В процессе разработки] SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»