Не срабатывает функция при выборе <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(....

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .